It's the future

This post is just a joke and does not attempt to expose the tools mentioned here in a bad light. I use them all the time, they are great, and I recommend using them. Based on It's the future @ CircleCI Blog

- Hey, I would like to learn how to write cool web applications. I heard you have experience.

- Yes, I am just engaged in front-end, I use a couple of tools.

- Cool. I do a simple application right now - a regular TODO list using HTML, CSS and JavaScript, and I plan to use jQuery. Is that normal?

- No no no. This is an old school. Jikvery is dead - no one uses it now! You need React. This is the future.

- Okay, frets. What is it?

- React is a new way of developing web applications. It is based on Virtual DOM and allows you to write JSX code.

- Virtual-what? Jsx? What is this ..?

- JSX is HTML on steroids. This is an enhanced version of JavaScript, where you mix XML and JS in one code. VirtualDOM means that you have a tree of objects representing a part of a real DOM, and it gives you the ability to manipulate them very quickly without having to work with the DOM directly.

- Why mix XML and JS?

- Well, why? React is the future. It allows you to create reusable components.

- Like in Backbone, right?

- Not. Backbon is dead. Right now, everything will be on the components.

- Well, so I do not need to bother about JSX or VirtualDOM?

- Nope. But it would be nice to understand how they work, so that you can not think about something that is hindering you somewhere, and optimize the code where it really makes sense, such as the state of the component.

- Okey, I'm starting to get a little lost. So, we have some shnyaga for writing components, called React. Can I use it with jQuery?

- Well, you can write one part of the application to React, and the other at what you want. But I tell you, jQuery is dead. By the way, you should pay attention to the Webpack to glue the components together during assembly.

- OK. What it is?

- This is a bandler of modules. You write a bunch of files as if they were Node modules — and then combine them into one monolithic file (or split into pieces) to send to the client. You don’t even need react-tools, you can do with Babel to compile JSX.

- Babel?

- Yeah, Babel. This is cool crap that transpires your ES6 + / JSX code into readable ES5 code, with support for sourcemaps. It is widespread, even on Facebook it is used.

- ES6 +?

- ES6 / ES2015 is the next version of ECMAScript, there are a lot of new features, such as classes, switch functions, Maps, Sets, and so on ... Right now, almost everyone uses ES6 +.

- Is that so good thing?

- You ask! ES6 + + transpilation is the future.

- Okay. How do I use it?

- Start by installing Node ...

- Install Node? Oh no. You did say something about React and components.

- Well yes. Then you take the Flux architecture and start creating actions, stores and components.

- Flux?

- In Flux, you build your application as a set of stores, actions and view, where data flows in one direction. Views call actions, they go through dispatcher, and stores subscribe to dispatcher events and issue change events to which the view is signed.

- Yeah. How in MVC?

- Not. MVC is dead. Flux is the future. Now there are a lot of implementations of flux.

- What? Flux implementations?

- Yes, because Flux is just a pattern. There are a lot of implementations: Alt, Flummox, marty, fluxxor, fluxible, etc ... And even there is a default implementation of the Dispatcher.

- I need to use it all?

- It is quite difficult for a beginner to code this whole sample code, so take some ready-made implementation.

- Okay. I would not like to write this tin myself.

- I speak, implementations dofiga.

- What about Angular?

- Ugh.

- Fu?

- Ugh.

- Look. I really do not want to bother with installing, configuring and finishing something difficult.

- All this is easy. There are ready-made whales / repositories for beginners, or you can use Yeoman generators to do it for you.

- I need a generator? Yeoman? What is it?

- It can generate code for you, and you can use it to create several applications at once. Use support DLL in new Webpack, and you can compile each application separately from others.

- I will have only one application, one page, one component, one anything. Only one.

- Not. Explore combinable components. This is how we do it now. You need to break everything into components - one for each separate little garbage.

- It seems that this is redundant.

- This is the only way to achieve accuracy, convenience and performance. You can use hot reloads like ...

- Hot Reload? Type as livereload?

- Not. Webpack supports this great feature, it is called hot rebooting modules, and there is a react-hot-loader plug-in for the reactant, so you can change the code for an individual component without reloading the entire page. And together with Flux, you can do your tower-breaking things like scrolling through the history of changes in data back and forth - simultaneously with hot code editing.

- So. Now I have dozens of different tools and libraries for packaging, assembling, transpiling, and whatever. Something else?

- As I said, Flux gives you the opportunity to build a good application architecture. But with Observables and Immutable data, everything becomes much better and more interesting.

- Observable? Do I need an Immutable?

- You need observables to work comfortably with events and asynchrony, and Immutable.js is needed for persistence, efficiency and simplicity. Observables are type as arrays, only asynchronous. They return values ​​using async generators from ES2016.

- What is the async generator?

- Well, look, a regular generator allows the function to return a series of values, and with the async modifier you can return values ​​to the future. True, the author of this, Jafar Hussein, has already withdrawn his proposal and is working with Kevin Smith on a more specialized es-observable for ES7.

- Ahem. I just want to run a simple application. How deep is the rabbit hole?

- Well, you can use RxJS, which is closer to the original observable. It is widespread and suitable for production.

- rxjs? What is it useful?

- Works with your already written promises and events. You can create an Observable from any asynchronous code, and work with it as with a normal value. But generally, if you are looking for something truly reactive and interesting, Cycle.js framework developed by Andre Staltz.

- WTF. I just need to write and run a simple application. Can I do it already or not?

- Of course, although deploing is a separate interesting question, but we are almost done.

- Okay, "today we understand a lot." Thanks for the explanation.

- Well! No problems.

- Let me repeat then, so that we make sure that I understood everything correctly. So, I need to break the code of my application into actions, stores and components, build a unidirectional dataflow, write ES6 + code to get all the latest language features that allow me to write clean code, then use Babel to translate this ES6 + code into ES5 code that is suitable for everyone browsers, use webpack to glue all parts of my application, written as node modules into one file, use ImmutableJS to represent my data and connect RxJS to describe events and other asynchronous functions.

- Yes. Isn't that amazing?

- And, yes, I still seem to have forgotten about statics and minification.

- Not a problem at all. Webpack can do it. All you need is to set up several boot loaders, plug-ins - and now almost everything. You can import CSS and images. By the way, there are more CSS alternatives that allow you to describe styles in JS ...

- I'm going back to jQuery.