React state Management with Redux including Hot Reloading & Time travel

Sep 2016

12 Mon

13 Tue

14 Wed

15 Thu 08:15 AM – 06:30 PM IST

16 Fri 08:45 AM – 10:20 PM IST

17 Sat

18 Sun

Make a submission

MLR Convention Centre, J P Nagar, Bangalore

##About JSFoo

JSFoo is India’s premier JavaScript conference. We launched JSFoo in 2011 as India’s first JavaScript conference. The JS community in India has grown phenomenally since. JavaScript now pervades every aspect of web development – browsers, apps, front-end, backend, mobile, and IoT.

##JSFoo 2016: Theme

Over the last few years, JavaScript has evolved to become the centerpiece of a complex web stack. Today, it is a prime subject of the obsession that lies with performance and speed. How can you get pages to load faster? How do you work with browser constraints to enhance speed? How do you measure performance? What actually is performance? In what ways do faster response times influence your architecture choices and plans? How is this new focus on faster page loads and apps working offline influencing the development of front-ends and backends as well as server side JS?

The theme for the 2016 edition is tackling speed and performance for JavaScript.

We are inviting full talks (40 mins), crisp talks (15 mins + 5 mins Q&A), and 3-6 hour long (hands-on) workshops from practitioners on the overall theme of speed and performance, including the following topics:

Architecting for performance – case studies on how you got faster response times
Best practices: debugging and profiling on the web, measuring performance
Handling large volumes of data in the browser
Building and deploying web apps eg webpack, travis
Modern web technology: Angular 2, React
Universal JavaScript: meteor js
Progressive Web Apps
JS off the web – raspberry pi, IoT
The cutting edge: elm

This year, JSFoo will feature two days of talks on JavaScript (15-16 September) and a single day of talks on design (17 September) at Meta Refresh (call for proposals will open shortly).

Guidelines for submission

Every proposal MUST be accompanied by:

A three minute preview video where the proposer gives an elevator pitch about the talk.
Detailed outline of the talk – either in the form of draft slides, mind map and/or textual description.
If you are proposing to speak on a topic where the code is not open-sourced yet, the editorial panel will consider your proposal only if the code is made open-source at least three weeks before the conference.

Without the above information, your proposal will not be considered for review.

If you are submitting a Workshop Proposal, you must clearly state:

Background knowledge that participants must possess in order to attend your workshop.
Details and links to software / packages which participants must install before coming to the workshop.
Laptop configuration.
Links to background reading material and GitHub repos.
Duration of the workshop.
Maximum number of participants who can attend your workshop.
Instructor’s past experience with conducting workshops.

There is only one speaker per session. Workshops can have two or more instructors.

Entry is free for selected speakers.

Due to budgetary constraints, we prefer speakers closer to home. But if we think you stand out, we’ll provide a grant to cover part of your travel and accommodation to Bangalore. Grants are limited and are made available to speakers delivering full sessions (40 minutes or longer) only.

Commitment to open source

HasGeek believes in open source as the binding force of our community. If you are describing a codebase for developers to work with, we’d like for it to be available under a permissive open source licence. If your software is commercially licensed or available under a combination of commercial and restrictive open source licences (such as the various forms of the GPL), please consider picking up a sponsorship. We recognise that there are valid reasons for commercial licensing, but ask that you support us in return for giving you an audience. Your session will be marked on the schedule as a sponsored session.

Important dates:

Deadline for submitting proposals: 29 August 2015
Conference dates: 15-16 September

##Venue
JSFoo will be held at the MLR Convention Centre, J P Nagar.

##Contact
For more information about speaking proposals, tickets and sponsorships, contact info@hasgeek.com or call +91-7676332020.

Hosted by

JSFoo

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more

All submissions

Previous Next

React state Management with Redux including Hot Reloading & Time travel

Submitted Aug 7, 2016

Section: Crisp talk Technical level: Intermediate

React — A JS library that helps us to divide up our app into multiple components but doesn’t clearly specify how to keep track of the data(aka State) and how to deal with all the events(aka Actions) properly.
Redux — A complimentary library to React that provides a way to easily keep the data(State) and the events(Actions).
Essentially Redux allows us to build React app as you are but delegate all the State and Actions to Redux

Redux & React are currently mainstream technologies in front-end. Every self-respecting front-end developer knows this fact and tries to dive into them to understand what they are and how to deal with them. Because it seems really clear that the future web applications are all about this sweet couple.

Redux evolves over the ideas of Flux, but avoids its complexity by taking cues from Elm. Whether you have used them or not, Redux only takes a few minutes to get started with.

Intented audience - Intermediate level expertise in Javascript

Outline

During this session, I could take the audience from React basic to how to manage state and communicate with Redux which is managing the state of application.

Highlighting Points will be :-

Redux flow with React Component
How its better from Flux
How you can manage and dubug the state of React application
Demo of application using debugging with React/Redux dev tool(Hot reloading and time travel)
Quick finisher with Webpack as transpiler and transformer for Production apps

The core strength of Redux is managing state and taking care of state. Using React components, we just need to talk to Redux layer to get state and render in our application.

Redux is independent library for managing state. I will be talking about how redux works with React using React-Redux
as a bridge library to allow communication between React & Redux. I will be focussing upon redux components like action creators, reducers, store and middlewares and how they fit with React components.

Redux isn’t just Redux. It’s a whole bunch of stuff to dive deep and expore.
Webpack :
we wil use this to pull together everything in single bundles instead of Browserify or Require and whatever else it is that you are using. Redux is so functional and you can make so much use of the new ES6/7 sugar with webpack and babel as transpiler.
React-Redux :
While strictly speaking Redux is framework agnostic. It was written with React in mind. This provides higher-order components that link React Components with Redux Stores. React Redux will help us to get state and create new application state by firing actions from react components.
Middleware :
Redux is synchronous so we need something to handle async calls to backend API’s.
You have two options here: thunks or some kind of promise library. Either way you need to async-ness in your app and this is the bit that makes it possible to do it in your action creators.
we will been using Axios for this and regitsering middleware to handle async class in action creators.

On the closing note, I will provide Github repository links for the audience, so they can get all the working samples and play with code.

Speaker bio
I am Tarun Sharma. I am a passionate developer for the past 5 years. I have been working on all different technologies and sincle last 3 years I am working with javascript, Anngular 1.x, Anguar 2.0, Node and different frameworks & library like react+immutable+Redux js. I am developer, publisher and onine trainer providing training online(free). I am using Redux in production application and found it very useful for state management and React friendly.
I have been providing trainings and talks on Redux in delhi meetups.

More on my work experience can be found here - https://in.linkedin.com/in/tarun-sharma-03790254

Requirements

Node/Git installed on systems if people want to execute app on their systems
I will be sharing git repo for demo aplication.

Speaker bio

I am Tarun Sharma. I am a passionate developer for the past 5 years. I have been working on all different technologies and sincle last 3 years I am working with javascript, Anngular 1.x, Anguar 2.0, Node and different frameworks & library like react+immutable+Redux js. I am developer, publisher and onine trainer providing training online(free). I am using Redux in production application and found it very useful for state management and React friendly.
I have been providing trainings and talks on Redux/React/Angular 2.0 in delhi meetups.

More on my work experience can be found here - https://in.linkedin.com/in/tarun-sharma-03790254