React and Vue are becoming increasingly popular for front-end application development.
The Pune edition is a single-day event for sharing:
- Practical insights on integrating React/Vue in front-end applications.
- Performance improvements with React/Vue.
- State management.
- New developments.
Participate in ReactFoo-VueDay as:
- Participant
- Speaker
- Volunteer
- Reviewer
- Collaborator
- Sponsor
and discover your peers from the growing front-end community in India.
Talks from previous editions of ReactFoo are published on hasgeek.tv/reactfoo and hasgeek.tv/jsfoo
The Pune edition will be held on 29 February 2020 at MCCIA, Pune.
For inquiries about speaking/collaborating with ReactFoo, write to reactfoo.editorial@hasgeek.com
Click here for the Sponsorship deck.
For more details and ticket inquiries, write to sales@hasgeek.com or call 7676332020
Silver Sponsor
Bronze Sponsor
Speaker Travel Sponsor
Sessions
-
Bharat Kashyap, front-end engineer at Atlan
Backbone => Vue: adding modern frameworks to legacy codebases
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. -
Thiyagaraj T, senior UI engineer at Kubric.io
Put a knob on that Redux store
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. -
Pratik Shah, senior software consultant at Techzaion
React code in imperative style
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. -
Sujasree Kurapati, MD at Deque Software
Sponsored talk: Agile development for accessibility
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. -
Aziz Khambati
What does it mean to be Reactive?
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 -
Rahul Gaba, UX engineer at Google
Using React context API and hooks to manage state
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. -
Vipul A M, founder at Saeloun
With Types and 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. -
Pratik Shah, senior software consultant at Techzaion
Persisting data across systems
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 -
Dhiraj Shrotri, fullstack developer at Cloudnaut Technologies
Decorating Vue with TypeScript decorators
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