September 06, 2014
Every tool that a developer use, should be waited to be useful, provide scalable and (recently) modular. They all contain some attitutes to problem-solving solutions and every developer has her/his own style of coding with their tools as well. In fact, the framework side of coding becomes deeper and deeper after a while and specialities among frameworks are determined by their capabilities like data-binding, templating, coding style, etc. During recent years, we all need to verify that tools like frameworks make life of coding easy to reveal useful and eye-catching things.
Not Make War, Make Easy : Vue
- authored by a Google worker, Evan You
- defined as “MVVM made simple”
- every object defined within Vue object, has a special HTML element to be initialized
- allows to set custom delimiters
- the framework supplies global instruments to be used for general construction like config as global settings setter, etc.
- choices as instantiation options as creating model and view context are el as the main element of context object, data as the container for configuration informations, methods as wrapper for context-specific procedures to invoke, template as draft for view side, ready as invoked method after the MVVM object.
- instance properties are used to reach ViewModel object’s information like $data as watched and used data and $index as counter-state controlling in loops, etc. There are also instance methods to control ViewModels.
- data-binding directives can be used to define data distributing with a MVVM-style of initializing.
- it also has filters to render information accordingly as filtering data with capitalized letters, ordering by arrays and etc.
- the tool focuses on a more structral development with object literal style
- also emphasis on performance
- plugin alternative connects ViewModels
- it has some examples developed with component and browserify for modularizing
After Coding Experience : Practice Often, Feel the Easiness of Use and Power
After a while, I have found the Vue example and decided to practice it by myself. I have used component tool to create a simple one page with seperated modules and call them where I expect to and have written some code. During development, it feels like I am really into a decoupled application and think only which component I was working on and what it was aimed to do. If you code a basic HTML content and want it inject only into DOM, just work in a component folder and develop it. If you even want to list a dynamic array, you connect a array variable with a method and then when this method is binded with a DOM element’s event, you have the list just on your view. That’s it. The direction reflects like Vue object -> data -> method -> binding. It makes your development process easy and productive.
Then, at work, we decided to develop some chrome extensions for some e-commerce things. It tooks only time to integrate my app into the chrome application wrapper. After then, the application works kindly with Vue. The performance is the main point of me but never makes trouble. I like it.
If you are familiar with especially Knockout or/and Angular, you will really love Vue, the development machine. It is now in the version 0.10.6 and Evan gets donation by gratipay for Vue.
Borning From The Ashes of Arrays : Mithril
- created by lhorie and its size is only 3KB
- characterized as lightweight, robust and fast client-side framework
- it supplies a model-view-controller and an extra module attitude
- “m” object is used to create Mithril-based applications
- models as usually, contains data, controllers are the glue between views and models, module initializes the context
- views are taking shape with element names, which are defined as strings, connects inner element strings with their array-like attributes. After a while, coding views
- becomes structuring stairs going right and after that going left through the end of view’s code.
- project structure can be created with one of the usual ways of defining context like first-class objects with constructors or object-literal.
- mithril uses nesting components to modularize apps
- it assures performance with its coding structure and size
- the framework has also routing alternative
- has a good documentation which also tells some tips about differences between other frameworks and libraries
- one of the key striking point of this tool is support till IE6
After Coding Experience : It is The New Backbone
To start practicing, I choose a basic todo app using also indexedDB. During the development, before some projects, begin to think that there should be an API for complex processes which also seperated from the main application. To make an app decoupled, firstly wrote an indexedDB API to push some data, get and handle information, update and delete which key-value pairs. Then, start coding this tiny app with a model called todo.model, and a todo.controller and todo.view as presentation object. Firstly, I decided to keep two properties as a description of todo item and a done value which keeps if todo item is set or not as boolean. At the end, binded current controller into view with methods and data. Everything is inside a callback-like arrays of arrays into each other. After then, you have a working application as well. This style of writing sometimes makes you begin thinking about coupling and seperation of concerns but when you think its performance advantages and clean writing style, you will keep using this skillful tool, you will never talking about your workmates about coupling and requirements for decoupled apps ll around.
Mithril also has a detailed blog and I recommend if you are into developing things with it, keep on reading since the author often keen on writing much about architectural approaches of this tool. This makes you all get used to this tool. With its 3KB size, Mithril is the new Backbone with its model-view-controller seperation. If you do not worry much about decupling, use it and fell its joy of coding. Currently, it is under development as open source so there are not so many titles and questions about that framework but it is worth to try.
Tool of An Age of Frameworks : Ractive
- described as powerful and extensible
- developed by Guardian Development Team
- not have a mission to be a framework but with its modesty cannot curtain its perfectness
- Ractive uses Mustache as templating engine and object literal coding style
- it uses a DOM-like model called Parallel DOM which contains information as up-to-date
- has an option configuration called Adaptors that connects any other tools like Backbone with itself. For example, you can use Backbone Models for Ractive templates
- like Vue, it has also a delimiter setter to use. Anyone who expects to use [] delimiters, it can be set by Ractive object’s delimiters property
- has a dependency injection method by direct and indirect dependants
- Componentizing is managed by isolated property to develop custom elements. These are also used directly as elements in DOM
- tries to make developers feel calm and safety. so developers have a challenge page to practice Ractive (learn.ractivejs.org)
- we cannot say that the documentation of the tool is not the avarage, it gives really detailed information, it is good
After Coding Experience : Feel the Reflective Type of Development
When we firstly develop a chrome app with any other framework, we need to think the main context in the specified framework or library, with Ractive, you can adapt for exmple Backbone into it and use its model structure with it. I did it like this and connect them together. It works well. I only use this tool for view and data implementation; the other processes are developed on Backbone to fetch data and pass it to the framework. It feels like a builder of a building with this combination. You can also see the available adaptors here. If you want to write some kind of things like new adaptor plugins, it is possible with this tool. During development, Ractive is easy to implement to any application. Just you need to think it with its adaptors. So you need to setup an application structure which suits working type of your application. If you use some coupled things, use just big but less files with large controllers, or if you choose a decoupled way, use a mediator object to controller all independent controller objects with this tool. This contains the management of adaptors as well.
To sum up, this tool with version 0.5.6 with the size of 419KB, makes your development processes clean and composable. You will like it.