It’s the future
This post is just for joke and means no harm to any of the tools and libraries mentioned below. I’m using them all the time, it’s amazing and I’d always recommend them.
This is heavily inspired from CircleCI’s blog post ‘It’s the Future’ and expresses the same in another perspective.
Hey, I'd like to learn to write rich web applications. I hear you've got a bit of experience in that area.
: Yeah. I'm a front-end guy, using a couple of tools and techniques to build web applications.
Cool. I'm building a simple web app at the moment — a normal TODO app using HTML, CSS and JavaScript, and I’m planning to use JQuery. Is that the way to go ?
: Oh, no. That’s old school. JQuery is dead — no one uses it anymore. You need to use React now. That’s the future.
Oh. Okay. What’s that ?
: React is the new way of building web apps. It uses a Virtual DOM implementation underneath and lets you write JSX code.
Virtual… what ? JSX ? What’s that ?
: JSX — It’s HTML on steroids. It’s an extended version of JavaScript where you mix XML and JS in the same code. VirtualDOM — You’d have a tree of custom objects representing part of the DOM, and it gives the ability to manipulate these objects very quickly without touching the actual DOM.
What is mixing XML and JS ?
: Ok. Look. React is the future. It lets you create components as reusable entities.
Oh. So you mean like Backbone views ?
: No. Backbone is dead. Everything is going to be components now.
So. I don’t need to know about JSX or VirtualDOM ?
: No. You still need to know the underlying concepts, so you can write code without worrying about operations being costly and optimize places where it ll actually be — like the component’s state.
Okay. I’m getting lost here. There is this thing to build components, called React. Can I use it with JQuery ?
: Well. React does allow you to build only part of the application and the rest with your choice. But I told you, JQuery is dead. You'd want to use webpack to bundle your components together.
OK. What’s that?
: It’s a module bundler. You write a bunch of files as you'd write node modules, and you just combine them to form a single file / chunks of files to serve to the client. Also, you don't even need react-tools, you just need babel to compile JSX.
Babel ?
: Yeah. Babel. It’s this cool tool that can transpile your ES6+, JSX code to readable ES5 code with the support for sourceMaps, and it’s widely adopted even Facebook uses it.
ES6+ ?
: ES6/ES2015 is the next version of EcmaScript where you have so many new features like classes, arrow functions, maps, sets, etc… Almost everyone uses ES6+ code to write their applications.
Is that good ?
: Of course it’s good. ES6+ + transpiling is the future.
Okay. How do I use it ?
: You start by installing Node…
Install Node? No no no… You were saying something about React and components.
: Yeah. So you have the flux application architecture pattern and you create your actions, stores and components…
Flux ?
: With flux, you build your app as stores, actions and views where data flow is in one direction. Views trigger actions, that runs through a dispatcher and stores listen to dispatcher and emit change events which the view again listens to.
Ah. Like MVC ?
: No. MVC is dead. Flux is the future. There are many many flux implementations out there.
What? Flux implementation ?
: Yeah. Flux is a pattern. Just look it up, #alt, #flummox, #marty, #fluxxor, #fluxible, etc… and there is a Dispatcher that is implemented by Facebook.
Why don't I just use the Facebook’s thing ?
: It gets complex to write all the boilerplate code efficiently as a beginner, so you start with one of the existing implementations.
OK. Yeah. I really don't want to do hard boilerplate code.
: Well. Yeah. As I said, there are some existing implementations.
What about angular?
: Ew
Ew?
: Ew
Look. I really don't want to go through the headache of bootstrapping complex code.
: No. It’s really easy. There are some starter kits/repos, or there are some yeoman generators to do that for you.
I need a generator ? Yeoman ? What’s that ?
: It can generate code for you, and you can use it to create multiple apps. Use webpack’s new DLL support to build every single app separately as well as together.
I’ll have only one app, page or component, whatever. Just one of them
: No. Look into composable components. It’s how we do everything now. You need to break down into components — one for every small entity.
That seems excessive
: It’s the only way to make sure it’s clean, developer friendly as well as performant. So you can do things like hot-reload…
Hot Reload ? Like livereload ?
: No. Webpack supports this amazing feature called hot module replacement, and there is a react-hot-loader for react where you can tweak a single component in isolation without reloading the entire page. And with your flux actions, you can do crazy things like replay your actions with live editing your code seamlessly.
Okay. So I've got dozens of tools and libraries for building, bundling, transpiling, whatever. Now what?
: I was saying. Flux — It lets you architect your applications well. With Observables and Immutable data, it gets nicer and interesting.
Observable ? I need immutable data ?
: You need observables to neatly handle events and a few other asynchronous calls and Immutable data for persistence, efficiency and simplicity. Observables are an asynchronous plural primitive analogous to arrays in the synchronous world. Observables are expected to be the return values of an ES2016 async-generator function.
What’s async generator ?
: See. A generator function modifies a function and causes it to return multiple values, an async modifier causes a function to push their values in future. So an async generator function is a combination of both — yield multiple values in future. But the author, Jafar Husain, has withdrawn this proposal and is working with Kevin Smith towards a smaller-scoped es-observable proposal for ES7/ES2016.
Sigh. I just want to launch a simple app. How much deeper does it get ?
: Well. You can use RxJS which is close to the observable spec. It’s widely used and production ready.
RxJS ? Why is this useful ?
: It plays nice with your existing promises, events ecosystem. You can create an Observable from any asynchronous code, and treat it like a first class citizen, pass around, handle async values, handle errors etc… Well, if you're looking for something truly Reactive and interesting, check out cycle framework by Andre Staltz.
WTF. I just want to build a simple app and demo it. Will I be able to do it ?
: Sure. I mean deploying it might be another interesting topic altogether, but you're basically there.
I see. Okay. I think I understood something. Thanks for explaining.
: Great! No problem
Let me just repeat some of what I've got it right.
: Sure!
So I need to split my application code into actions, stores and components following one directional data flow, write ES6+ code which would allow me to use the latest features and let me write clean code, use babel to transpile this ES6+ code into ES5 code which all browsers can parse, use webpack to join all the files written as node modules, use ImmutableJS to represent all my data and RxJS for all my events and other asynchronous functions.
: Yes. Isn’t it glorious ?
I think I forgot about static content, and minification.
: Not a problem at all. Webpack allows you to import them. All you have to do is configure some loaders, plugins and you're basically done. You can import component level stylesheets and images and use them with this setup. There are other alternatives to stylesheets where you can write CSS in JS.
I’m going back to JQuery.
