JSFoo 2015

ReactJS and Flux as much better front-end engineering battle-axes.

Outline

This is an in-depth version of our previous introduction to ReactJS workshop.

We’ll go through the fundamentals and philosophy of ReactJS and see how we can write more modular, testable and maintanable JavaScript interfaces.

We’ll try to cover these high-level ideas:

• Setting up a simple ReactJS application.
• Writing UI components that can be re-used across the application.
• HTML-like templating languages (like JSX, react-templates) that make it much easier for designers to write dynamic interactions by themselves.
• Declarative / logic-less UI components that can perform transitions / animations etc.
• We’ll try our hands on building a few simple UI components. For example, a menu system like this:
  
• Understanding the Virtual DOM and DOM reconciliation algorithms.
• Server-side rendering for better performance and SEO.
• Using Promises to write better asynchronous components.
• RefluxJS as an implementation of the Flux architecture pattern that simplifies data-flow in heavy JavaScript UIs.
• Testing React components using React.addons.TestUtils and MochaJS.

Requirements

Some prior experience in JavaScript, HTML and CSS should be sufficient as far as the content of the workshop is concerned. It’d be helpful if you’ve played around with React a little bit, deployed a small program and have some idea of what it does. If you’re purely considering this just to see what the fuss is all about, we’ll try our best to have you converted by the end :)

There are a few parts that are a bit heavy on theory that will attempt to give you an idea of the inner workings of React. Most of it otherwise would be practical problems that we’ll solve in real-time and anecdotes from our experiences using it in production.

Do setup your laptop with the lastest Chrome, Sublime Text editor, node, npm and a terminal. If you can setup React on your own, that’d be great; we will guide you through this https://github.com/nilenso/reactjs-workshop15 to help you set it up otherwise.

Speaker bio

Abhinav //
Old school JVM hacker. Loves log files. Wishes he was programming Haskell.
Tejas //
Modern day aesthetically-relevant hacker. Long time Rubyist, recent JavaScript and Clojure programmer.

Links

• nilenso.com
• quintype.com
• github.com/gja
• github.com/abhin4v
• Code at https://github.com/nilenso/reactjs-workshop15 and https://github.com/gja/react-workshop
• React https://facebook.github.io/react/index.html
• Reflux https://github.com/reflux/refluxjs