We believe connecting great talent to great companies requires every line of our code to be special. And this is the first of many posts to come on the engineering developments from Belong.
Every startup’s fondest dream is to keep building functionality and features and make an exhaustive app. All this, while making an easy and intuitive interface for the end user. However, that’s easier said than done. Initially, we used both Angular and jQuery to get to an MVP. But soon, our front-end started getting cluttered with more logic on managing external dependencies than the actual view logic. The price of maintainability and evolution in the long-run was soon wearing on us and we realized that we had to choose a single framework fast.
The Angular problem
When Angular first came into the spotlight with their MVC (Model View Controller), a lot of people were simply blown away with its two-way binding logic, dependency injections, reusable directives and philosophy of Model as the single source of truth.
There is just an explosion of command flows, and it is hard to tell if there is an infinite loop that might be causing a cascading effect. Also, for every view/model added, the code to manage the communication increases.
Also, Angular did not come with extensive support for AMD or CommonJS patterns. To be fair, much of this is being fixed in the upcoming Angular 2.0. But with no backward compatibility and the scope of release in 2016, we were on the hunt for a good JS framework for our app that could allow us to:
- Automate the front-end build system
- Do quick prototyping
How React came into the picture
The world of front-end is very fast-paced and there is a new technology every day with a community to support it.
We started exploring React more. A quick look at Facebook’s React documentation made it clear that React is predominantly the V in MVC. Though, FB provides a library called flux, which helps React play the flux way.
Flux over MVC
Unlike MVC, in Flux, the data flow is unidirectional. So when an action comes in, the dispatcher acts as a traffic control and updates the store. And every time the store gets saved, the view renders again. The dispatcher is the critical part over here; even if the view throws back another action, the dispatcher does not proceed with the action until the store is saved from the previous effect.
Which means that as long as stores are correctly defined and views are listening to stores, all many-to-many relationships between Views and Stores are automatically handled. Because of this, the tedious two-way data binding code could be done away with.
Why React works better
In React, the control is internalized. The state that updates the logic of the state remains inside the state, giving consistency in views, which ensures that the DOM at any given time is a function of state and nothing else.
- Using third party tools, integrating npm packages is also easy since you don’t need to write wrappers around them like in the case of Angular.
- Using build systems like webpack, gulp and grunt for ES5 in React is much simpler than compared to Angular. As, Angular does not provide easy walkthroughs for build systems and module patterns.
- All dependencies can be handled using Browserify and the ordering is unambiguous. This is a clear advantage that React (with Flux) has over Angular where dependencies are loaded in order which again has to be handled separately.
- React has a pure JS approach. When used with the JSX library, which allows you to define the HTML view (this also takes care of cross-browser issues) in the js file itself. You can also add state-specific styles as JSON objects to the view as well. For example, it allows the developer to have one Dropdown.js which contains all the HTML, the drop-down specific CSS, and the js in one file, which helps in the development process.
How has it been so far
With React unit testing is much easier. Facebook’s engineers have developed a testing framework called jest that gels well with React. Jest automatically mocks dependencies and also runs tests with a fake DOM implementation.
Our front-end development cycle has improved drastically with more features being pushed in lesser time with lesser effort. What once took us a week is now taking up only a day.
In the process, we also explored and added more ammunition to our front-end stack by using:
- Tools like browserify and npm to modularize our code
- Webpack and react-hot loader for super fast development
- Other tools like uglify, minify-CSS etc for production specific builds
What’s next for Belong
Going forward, we want to use ES6(and even ES7) more along with transpilers like babel and see if that helps.
At the moment though the results of our migration are amazing. With extremely modular and reusable components, debugging has never been easier and the development time has decreased significantly.
But having said that, we are continuously exploring better options which can improve the code even further. Because being better than what we were yesterday is our motto.
Angular and React are completely different instruments, but both great for writing single-page applications. You can find a lot of information about AngularJS and ReactJS, examples of code at www.linkites.com/react.js
View React and Angular portfolio – https://linkites.com/portfolio.php
for any query send us a mail at firstname.lastname@example.org