PulseTile - Making Technical Choices in the fast world of frontend JS
So one of the most difficult choices to make when crafting a frontend framework is which tools to use. We have been over this many times and gone for a mix that makes sense for now. We'll be keeping our eyes open as the trends develop, will React/Angular/Vue/Aurelia/other win the day? We'll follow them closely and follow the leader from the pack.
PulseTile uses the following technology stack:
- React 15.6.2
- Redux
- Webpack
- RxJS
- Es6
React
React is a front-end library. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.
Redux
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native),
and are easy to test. On top of that, it provides a great developer experience,
such as live code editing combined with a time traveling debugger.
We use redux module for React - https://github.com/reactjs/react-redux
WebPack
Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split the codebase into multiple bundles, which can be loaded on demand.
This means webpack takes modules with dependencies and emits static assets representing those modules.
Goals:
- Split the dependency tree into chunks loaded on demand
- Keep initial loading time low
- Every static asset should be able to be a module
- Ability to integrate 3rd-party libraries as modules
- Ability to customize nearly every part of the module bundler
- Suited for big projects
RxJS
RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.
Es6
ECMAScript6 (ES6) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. We decided to use the ES6 syntax in our application to create reusable components.
Babel is essentially an ECMAScript 6 to ECMAScript 5 compiler; it fills the gaps between the new ECMАScript features and the current JavaScript implementations. Babel allows us to use ES6 features in our project and then compiles ES5 for using in production.