Latest Stories

How Recoil works its magic and the greatness of XState 🎉August 21, 2020

State management is hard, especially in large and complex application where we have thousands of components to form a single master piece of application to deliver some value to its intended customer. Popular libraries such as React, Vue, Angular, Cycle, Aurelia, Svelte, etc have done a fascinating job in abstracting the rendering logic to the UI environment (web, mobile, desktop, embed devices…

Keep Reading →

Demystifying dependency injection in JavaScript 💉June 24, 2020

For folks who are curious bout what decorator in JavaScript is all about, please visit this series of awesome article. You will learn a lot by reading through the code, feature available, the why and how of different types of decorator available in JavaScript. Finally, the reflect metadata plays a vital part in the whole architectures of many frameworks out there such as Angular, Nest and Vue's…

Keep Reading →

UI frameworks and Media Elements 🎧June 02, 2020

Accompany presentation It's harder than you thought, easier than you think First of all, let's define couple of terms before moving to the rest of the article: Media elements: audio and video elements on the web Frameworks: UI libraries that helps developers deliver slick user experience in scalable manner MSE: Media Source Extension API helps developers to load data to media elements plugin-free…

Keep Reading →

Reverse-engineering PDF search algorithm from Firefox 📝June 01, 2020

At AXON, we use React extensively for all of our web applications. And , pdf.js from Mozilla Firefox has always been de facto solution to go for whenever someone consider adopt one battle-tested PDF solution for their product. It has been used by vast number of companies, browser extensions and libraries (open source and comercial). We've used react-pdf as our React's binding resolution for…

Keep Reading →

State PatternDecember 27, 2019

Applicability An object's behavior depends on its state, and it must change its behavior at run-time depending on that state Operations have large, multipart conditional statements that depend on the object's state. This state is usually represented by one or more enumerated constants. Often, several operations will contain this same conditional structure. The State pattern puts each branch of the…

Keep Reading →

Visitor PatternDecember 26, 2019

Applicability An object structure contains many classes of objects with differing interfaces, and you want to perform operations on these objects that depend on their concrete classes Many distinct and unrelated operations need to be performed on objects in an object structure, and you want to avoid "polluting" their classes with these operations. Visitor lets you keep related operations together…

Keep Reading →

Template Method PatternDecember 26, 2019

Applicability To implement the invariant parts of an algorithm once and leave it up to subclasses to implement the behavior that can vary When common behavior among subclasses should be factored and localized in a common class to avoid code duplication #DesignPatterns Let's put this pattern into practice. We are going to implement a simple pizza maker application. We have a template that define a…

Keep Reading →

Observer PatternDecember 25, 2019

Applicability When an abstraction has two aspects, one dependent on the other. Encapsulating these aspects in separate objects lets you vary and reuse them independently When a change to one object requires changing others, and you don't know how many objects need to be changed When an object should be able to notify other objects without making assumptions about who these objects are. In other…

Keep Reading →

Memento PatternDecember 25, 2019

Applicability A snapshot of an object's state must be saved so that it can be restored to that state later A direct interface to obtaining the state would expose implementation details and break the object's encapsulation #DesignPatterns Let's take a simple example of text area where content is modified overtime. We would like to store the change and restore its state back at any point in time…

Keep Reading →

Mediator PatternDecember 25, 2019

Applicability A set of objects communicate in well-defined but complex ways. The resulting interdependencies are unstructured and difficult to understand Reusing an object is difficult because it refers to and communicates with many other objects A behavior that's distributed between several classes should be customizable without a lot of subclassing #DesignPatterns Let's code up a sample…

Keep Reading →

Iterator PatternDecember 25, 2019

Applicability To access an aggregate object's contents without exposing its internal representation To support multiple traversals of aggregate objects. To provide a uniform interface for traversing different aggregate structures #DesignPatterns Let's take a pretty simple example application in which we have a collection of libraries. We need to provide a way for this collection to create a…

Keep Reading →

Interpreter PatternDecember 25, 2019

Applicability The grammar is simple. For complex grammars, the class hierarchy for the grammar becomes large and unmanageable. Tools such as parser generators are a better alternative in such cases. They can interpret expressions without building abstract syntax trees, which can save space and possibly time Efficiency is not a critical concern. The most efficient interpreters are usually not…

Keep Reading →

Strategy PatternDecember 25, 2019

Applicability Many related classes differ only in their behavior. Strategies provide a way to configure a class with one of many behaviors You need different variants of an algorithm. For example, you might define algorithms reflecting different space/time trade-offs. Strategies can be used when these variants are implemented as a class hierarchy of algorithms An algorithm uses data that clients…

Keep Reading →

Command PatternDecember 24, 2019

Applicability Commands are an object-oriented replacement for callbacks Specify, queue, and execute requests at different times. A Command object can have a lifetime independent of the original request. If the receiver of a request can be represented in an address space-independent way, then you can transfer a command object for the request to a different process and fulfill the request there…

Keep Reading →

Chain Of Responsibility PatternDecember 24, 2019

Applicability More than one object may handle a request, and the handler isn't known a priori.The handler should be ascertained automatically. You want to issue a request to one of several objects without specifying the receiver explicitly The set of objects that can handle a request should be specified dynamically. #DesignPatterns Let's go for a quick example. We have an imaginary workflow as…

Keep Reading →

Proxy PatternDecember 24, 2019

Applicability A remote proxy provides a local representative for an object in a different address space A virtual proxy creates expensive objects on demand. The ImageProxy de- scribed in the Motivation is an example of such a proxy A protection proxy controls access to the original object. Protection proxies are useful when objects should have different access rights A smart reference is a…

Keep Reading →

Flyweight PatternDecember 24, 2019

Applicability An application uses a large number of objects Storage costs are high because of the sheer quantity of objects Most object state can be made extrinsic Many groups of objects may be replaced by relatively few shared objects once extrinsic state is removed. The application doesn't depend on object identity. Since flyweight objects may be shared, identity tests will return true for…

Keep Reading →

Facade PatternDecember 24, 2019

Applicability You want to provide a simple interface to a complex subsystem.Subsystems often get more complex as they evolve. Most patterns, when applied, result in more and smaller classes. This makes the subsystem more reusable and easier to customize, but it also becomes harder to use for clients that don't need to customize it. A facade can provide a simple default view of the subsystem that…

Keep Reading →

Decorator PatternDecember 23, 2019

Applicability To add responsibilities to individual objects dynamically and transparently, that is, without affecting other objects For responsibilities that can be withdrawn When extension by subclassing is impractical. Sometimes a large number of independent extensions are possible and would produce an explosion of subclasses to support every combination. Or a class definition maybe hidden or…

Keep Reading →

Composite PatternDecember 23, 2019

Applicability You want to represent part-whole hierarchies of objects You want clients to be able to ignore the difference between compositions of objects and individual objects. Clients will treat all objects in the composite structure uniformly #DesignPatterns Let's put this into practice by implementing a simple box finder structure. The Box can have both file and another box inside which can…

Keep Reading →

Bridge PatternDecember 23, 2019

Applicability You want to avoid a permanent binding between an abstraction and its implementation. This might be the case, for example, when the implementation must be selected or switched at run-time Both the abstractions and their implementations should be extensible by subclassing. In this case, the Bridge pattern lets you combine the different abstractions and implementations and extend them…

Keep Reading →

Adapter PatternDecember 22, 2019

Applicability You want to use an existing class, and its interface does not match the one you need You want to create a reusable class that cooperates with unrelated or unforeseen classes, that is, classes that don't necessarily have compatible interfaces You need to use several existing subclasses, but it's un- practical to adapt their interface by subclassing every one. An object adapter can…

Keep Reading →

Singleton PatternDecember 21, 2019

Applicability There must be exactly one instance of a class, and it must be accessible to clients from a well-known access point when the sole instance should be extensible by subclassing, and clients should be able to use an extended instance without modifying their code #DesignPatterns The typical example would be HTTP service that response for a whole application to make request to the server…

Keep Reading →

Prototype PatternDecember 21, 2019

Applicability The classes to instantiate are specified at run-time Avoid building a class hierarchy of factories that parallels the class hierarchy of products When instances of a class can have one of only a few different combinations of state. It may be more convenient to install a corresponding number of prototypes and clone them rather than instantiating the class manually, each time with the…

Keep Reading →

Factory Method PatternDecember 21, 2019

Applicability A class can't anticipate the class of objects it must create A class wants its sub classes to specify the objects it creates Classes delegate responsibility to one of several helper subclasses, and you want to localize the knowledge of which helper subclass is the delegate #DesignPatterns Let's take a practical example that illustrates the usage of this method. We have various UI…

Keep Reading →

Builder PatternDecember 20, 2019

Applicability The algorithm for creating a complex object should be independent of the parts that make up the object and how they're assembled The construction process must allow different representations for the object that's constructed #DesignPatterns Let's take an example in building UI elements based on different libraries such as React, Vue and Angular. We need a thing so-called director to…

Keep Reading →

Abstract Factory PatternDecember 19, 2019

Applicability: A system should be independent of how its products are created, composed and represented A system should be configured with one of multiple families of products A family of related product objects is designed to be used together, and you need to enforce this constraint You want to provide a class library of products, and you want to reveal just their interfaces, not their…

Keep Reading →

Announcing the series of posts on Golang design patterns 🎉🎉🎉December 19, 2019

Lately, I was fortunate to watch a talk on how import software architect is by a talk from one of the most famous software programmer of all time - Uncle Bob. If you come across this post and you are part of the IT industry, please spend an hour or so to watch carefully the video below - IT WILL CHANGE YOUR LIFE 😗 After watching this, I found out what to do next to sharpen my knowledge on…

Keep Reading →

Introducing React-Zoomable-Media 🔮October 29, 2019

The zooming functionality has been always one of our customer's most wanted features. As our customers are police officers, the need for advance viewing media evidence is a must-have. After the media have been recorded, they need to be processed by the BE team at first since the majority of browsers are only capable of rendering well-known media format like jpeg, png for image and mp4 for video…

Keep Reading →

Ever lasting love movies ❤️March 11, 2019

Here we go: 😊 A walk to remember A moment to remember Adrift Be with you Crazy stupid love Dear John Definitely, maybe Love actually Lala land Moulin Rouge Pride and Prejudice Pretty woman Titanic The longest ride The vow The notebook 500 days of summer 50 First dates Last Christmas The curated list above really influence my take on love, it means to me a great deal. Love is like oxygen, we…

Keep Reading →

Problems with not using routing system properly -> UX === 😳March 07, 2019

First and foremost, I want to list out the common problems with improper implementation of routing systems. After that, I am going to write about how to tackle them one by one. Ready? Here we go: Forget to check for user's permission on each screen Forget to redirect user's back to where they wanted to view in the first place after authentication Render something on screen and redirect user after…

Keep Reading →

Let's talk about SharedWorker 🤔March 04, 2019

QUOINE's core product is a trading platform for cryptocurrency where people can trade various kind of currencies includes famous ones like Bitcoin and Ethereum. In order to have a real time system in place, we decided to go with Pusher realtime APIs as a service vendor. Thus, we don't have to worry about technical implementation for both Back-end and Front-end sides. Furthermore, the documentation…

Keep Reading →

Introducing INAB app - aka I Need A Budget 💸March 02, 2019

Money can't buy happiness 💞 It's one of the most famous sayings of all times. I had believed this quote for such a very very long time. Until one day, I watched a TED Talks that totally blew my mind away. Seem like the sentence above is not absolutely correct. "Could money buy happiness" - my answer is YES and NO. And here is why: Without being able to fulfill our basic need according to Maslow…

Keep Reading →

Be well Be Happy 💞January 30, 2019

It all started by a beautiful day, the sky was so clear and everything looked shiny. On the 1st of January 2018, I came back to my hometown to enjoy short holiday with my family. After couple of days, after the holidays was over, I ride back 🏍 to Ho Chi Minh city where I lived and working. I felt a bit sick as I got some temperature. It was raining, I thought it wasn't that hard so I decided to…

Keep Reading →

Cancelling pending requests on route-changed to improve application's performance at QUOINE 🚀January 18, 2019

Initially, the situation was that whenever users navigate too fast among difference routes. This process made a ton of API calls that stacking up the browsers' networking queues. As per HTTP 1, browsers can only support certain amount of concurrent requests at any given time (source - max parallel http connections in a browser). Even though with HTTP 2, that won't be the case as one single TCP…

Keep Reading →

The problems we faced at QUOINE 😱January 13, 2019

The link to the full presentation is located at https://fe-codebase-quoine.netlify.com 🚀

Keep Reading →

Simple state management with singleton pattern at QUOINE 🗽January 13, 2019

At QUOINE, we use Redux for all the thing with regard to state management. It comes with several costs: Boilerplate all over places Action, reducer and connected component are three files to maintain regardless of the size of a feature The whole React's VDOM tree re-renders on every action dispatch because we do not use any immutability library in combination with Redux Currently, we need a way to…

Keep Reading →

Forking create-react-app at QUOINE - part 4 💻January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration The final part of this series is devoted for configuring webpack's production mode for building web applications at QUOINE. Here is our FE's current codebase structure…

Keep Reading →

Forking create-react-app at QUOINE - part 3 💻January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration At QUOINE, we were using CSS module across our applications. Needless to say. the biggest drawback of this approach is dynamic property configuration and lack of theming…

Keep Reading →

Forking create-react-app at QUOINE - part 2 💻January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration The way we structure our application at QUOINE is not something that natively supported by the original CRA. Specifically, CRA only support a single application under…

Keep Reading →

Forking create-react-app at QUOINE - part 1 💻January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration The create-react-app version 2 from Facebook's core team has upgraded vast majority of key technologies included such as: Webpack version 4 Jest version 23 Babel version…

Keep Reading →