The web development world looked a lot different at the beginning of this decade. Full stack development was seeing its origins, with a number of JavaScript frameworks being developed for both front and back end use. A number of the large software companies around us today - AirBnb, Uber, Hulu - built the first versions of their products on such frameworks. These frameworks – one of which was Backbone.js – look very different from the frameworks most of us are used to. Built during a time of an extremely limited JavaScript, these frameworks did not evolve at the same rate over this past decade as JavaScript. Cut to 2019, even though they retain their place in very large codebases, there are very few developers comfortable writing code in them; they slow down parts of the application, feature building and debugging – just because it is difficult to introduce newer, modern frameworks into such legacy codebases. We performed a similar experiment in our own application – of introducing Vue to a very large application writtin in Backbone.js – and learned a lot in the experience. The aim will be to lightly outline how we implemented this mixed migration, and what specific benefits we observed in the process.

How state is like a film reel? See redux in motion. Dispatch Dispatch Everywhere! Centralized store but localised action dispatching. How to make minimum updates to the store? How to mitigate intermediate states to avoid undesired state, hollow re-renders & improve render performance? Discover your new super power - Batched Actions, minimize the number of React re-renders by batching actions. Designing an Action Queue for your store - Enable, Flush, Priority, Size, Queue Jumpers. Throttle actions which can wait - ThrottleQueue for high frequency & low priority actions. Put a knob on that store! Yes you need to, Every app is not the same. (Intro to redux-knob) Orchestrate multiple Action Queues with a Queue Factory. Ideas around different queue strategies, like scheduling actions based on priority, buffer & time based.

Components are first class citizens in React and they are independent of each other. By independent I mean they are self managed entity, they have their own state and logic. In react project, components are arranged in a tree structure. So only way parent component can ask child component to do something is by passing props to it. Which is declarative way of writing code. And this is how code should be written in React. But there are some rare case in which we need to write imperative style of code. i.e instead of just passing props, we want to call internal methods and manage component’s state. React “Refs” are the way of doing this. In this talk I will be talk about those rare case and analyse how good/bad it can be.

Digital accessibility was an unknown world for the last few years and companies have realised that an inaccessible platform fails to seek the attention of almost one billion people (Potential Prospects) – 15% of the world’s population. Customers might be quickly moving towards solutions that are accessible while you go back trying to fix the accessibility issues (Customer Loss). Knowing the required automated tools that can help you write accessible code right from the first day of development can act as a boon. By attending our session you will be empowered with the required tools and APIs that would help you catch 50% of accessibility issues while you code. We will show you a demo on How to integrate our Accessibility API with a react application so you can unit test your components while you develop. How to enable accessibility testing on CI/CD build processes.

What is Iterative Programming? What does it mean to be Reactive? UI as a function of State (Declarative UI) VDOM introduced to get rid of Imperative Programming Drawbacks, Compromise due to lack of language features Other Examples CycleJS Redux Observable -> Declarative Actions Compromise on Performance, Memory Svelte -> Retain benefits of writing Reactive Code with benefits of Imperative Programming

The talk will be broken down in the following: Why state management is required? Brief intro of redux. Benefits of redux. Problems with redux. When to use the Context API instead of redux. How to scale the Context API using hooks.

The Talk will try to outline these things: - What is FlightJS: Event driven JS framework - Brief intro to React hooks - Effects in React hooks - Brief intro to TypeScript We will then get into the story of the migration: - How was it decided what parts of Application to start changing - Living side by side with Flight - Introducing typescript with React - Side effects on these introductions: clean up of states, type safety, re-organization of components, passing around less information and better UI patterns.

We have a react-redux app. 1. First will discuss data persisting issue with Redux. On refersh redux loses all data 2. Explain how we can solve this using redux-persist 3. Issue with redux-persist: currently it supports browser cache 4. Next how we can store cache on backend and can access it from different machine

What are decorators and what’s so great about them? Decorators in Typescript A quick look at Decorator Factories Getting started with Typescript and Vue Using Typescript in your Vue apps Using Typescript Decorators to extend functionality of a Vue Component Introduction to the Vue Class Component and Vue Property Decorator libraries Writing custom decorators using the Vue Class Component Library

What is Unidirectional user interface architecture? Advantages of Unidirectional user interface architecture. Demo of Snabbdom with JSX syntax & handling of states.