Built for six days from scratch. With love. Vanilla JS, es2015 and webpack included. Take your 🍺 🍺 🍺 and GO PLAY!
###UNDER HOOD The architecture of this application is based on two approaches
- The simplified implementation of Redux library.
- Component approach where components don't realise any business logic. Components in this implementation is a simple view.
####ADVANTAGES
- Clear separation to layers - MODEL (state + reducers), VIEW, CONTROLLER (App class)
- Thanks to the first point we can reuse some reducers (Business Logic) in other platforms. For example, "gameReducer" realises the main business logic and it can be used in react native on IOS and Android platforms.
- As the state is just plain object, it can be easily saved and loaded. For example, on the server or in the local storage.
- It is also possible to keep actions or state directly to use them later for logging or “sliding" the state in any point of time.
####DISADVANTAGES
- First of all it is the simplified version of component architecture. Using only virtual DOM we can't effectively monitor the changes of the state and build the patches only in those views which state has changed. And though in this application this disadvantage doesn't have value, in any application, where the DOM tree will be much deeper, performance may drop.
- Due to the fact that the application has a complex architecture needs more time to understand how it works.
###HOW IT WORKS
####INITIALIZATION All process of initialization of application realised in the “app.js" file. There is the application class and instance of this class is in this file. Initialisation process includes event bindings. Also during the initialization the render method is called where creates a DOM tree of the application.
####EVENT BINDINGS Event binding process is realised inside the "assign-events.js" module. In fact it is the simple function of two arguments: context of events and hash of events. The context of events is used for search methods which names are generated automatically based on the transferred object in the second argument. The second argument is a plain object where keys are the names of DOM events (click, focusout) and values is the data-attribute names without "data-" prefix. When there is an event the handler looks for in "event.target" one of the defined data-attribute. Further the generated names are checked in a context if they are in the context they are executed as event listerers. The name of a method is generated by the following principle: snakeToCamel(‘on + ATTRIBUTE NAME + ATTRIBUTE VALUE), for example for attribute 'data-main= "roll"' context will be checked for the "onMainRoll” method.
####VIEW Micro template engine (which was described by John Resig) is used for constructing a view. A view structure is an hierarchical tree of views, each of them is a function of a state object and returning raw HTML string. The result of the top view (views/app.js) is used for application rendering.
####RENDERING Rendering is based on the way, described by facebook as “Virtual DOM". To render the application the following methods are used:
- fromHTML: generate virtual node from raw HTML string;
- diff: generate patch between previous virtual node and new (current) virtual node;
- patch: The patch object from the diff method is used to update the DOM node in the document tree;
- createNode: It is used in application initialisation. It creates DOM node from virtual node.
####VIRTUAL DOM As it was said above the virtual DOM in the application is based on the way, described by facebook. However this implementation is much more simplified version for example it is not able to process SVG and other types DOM node except node with nodeType === 1 and nodeType === 3.
####CSS The application uses plain css with only one post processor - "autoprefixer". CSS-LOADER (loaders in webpack) used to organize modular css, where css files are separated from each other by hashing of each used css selector.
####WEBPACK Weback is used for building the project and using es2015 syntax.
####USER INTERACTION Application interaction with an user is based on native DOM events, of course. Each event handler can apply “reducer" function with “state” and “action” arguments. Reducer returns a new state of application by the formula: (state, action) => state. New state is used for creating a new HTML by formula: view(state) => HTML. This HTML is used for building virtual DOM patch which is applied to DOM node of application.
####ONE-WAY DATA FLOW Implementation of data flow is the simplified version of the “Redux” library approach. Where all abstractions except “action creators", "action types" and “reducers" are excluded.
####ACTION CREATERS Action creators are simple functions which returns plain objects with two possible properties. Type property is property which indicates action type. Data property is not necessary payload for reducers.
####ACTION TYPES Action type is simple constant that is used inside reducers for define branch of business logic.
####REDUCERS Reducers are just functions of two arguments - state and action (modifier). Reducers are used to create new state based on the different actions. The best way is the immutable state, but i didn’t chose this way to make it easy.