JSFoo 2014

JavaScript as the centerpiece of a complex web stack

Building single page apps with React.JS

Submitted by Vagmi Mudumbai (@vagmi) on Friday, 29 August 2014

videocam_off

Technical level

Intermediate

Section

Workshops

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +6

Objective

Participants would understand how ReactJS works and how to build a single page app with ReactJS. We will also briefly touch upon the Flux application architecture and see how we can architect applications with the Flux architecture

Description

ReactJS helps us build Reactive UIs with javascript. It was built by Facebook and is used by open source editors like Atom. ReactJS builds a Virtual DOM instead of using Browser’s DOM that allows Single Page Apps to run at 50fps even on mobile browsers. This also simplifies the View code as there is no need to track the state of the DOM and can simply re-render the view without affecting the performance.

The workshop will be structured into three parts. The first and third part will talk about the state of React and its path going forward and the meat of the workshop would be a hands on approach in building a Todo List app using a parse backend and the UI built with React.JS and Backbone.

  • A quick intro to React.JS and JSX
  • Build a todolist app with React.JS and Backbone
  • A quick intro to Flux and upcoming projects like React Router similar projects like HTMLBars

Workshop JSBin - http://jsbin.com/nupuza/4/edit

Speaker bio

I have been building apps for the past 10 years with various technologies like Clojure, Ruby, Node, Python and Java. Both libraries like jQuery and frameworks like BackboneJS, Ember, Angular have left me wanting with a better way to build large apps. Having worked with ClojureScript and Om, I beleive that ClojureScript with frameworks like Om/Reagent is probably the best way to organize large frontend codebase.

Links

Slides

http://www.slideshare.net/vagmi/building-single-page-apps-with-reactjs

Comments

Login with Twitter or Google to leave a comment