ReactNext is an one-day community-driven event packed with advanced lectures by internationally renowned speakers, and networking opportunities with over 750 attendees from all around the world, that share a passion for React. 

ReactNext targets both beginner and experienced devs in two parallel tracks with sessions about React, React Native, Redux, MobX, and everything about the ecosystem.

Every major website in India and beyond is shifting to React. As a result, there is a thriving React ecosystem that more and more people are trying to get into. Due to overwhelming attention that React commands today, we’ve launched a new single-day conference distinct from JSFoo - our annual JavaScript conference.

The target audience for this year’s edition includes React practitioners and developers keen to understand optimizing. We will have topics ranging from Redux and state management, Routing, React Native, styling, Decorators, React testing, alternative frameworks, and more.

ReactFoo

One of the chief reasons why we adopted React Native at Flipkart was to deliver Over The Air (OTA) updates to our 50+ million users instantly. When we looked at the known existing solutions like CodePush etc, we found three major issues that were not solved but were critical for us:

1) The updates were not really instant as a cached bundle gets loaded while it silently gets updated in the background.
2) These updates were enormous in size (around 700kB) as the entire bundle gets downloaded at the client-end every time an update is shipped. For our average 2G users who visit the app once a month, it would take more than 30s for the React Native bundle to get downloaded and the page to be loaded everytime the App is launched.
3) We have multiple teams maintaining their own React Native bundles. When these teams themselves share a lot of common components besides the React Native Framework Code, lots of redundant download is caused.

We built our own system which efficiently solved all of these issues and is being used by multiple Apps inside Flipkart.

This talk will give a detailed description of the solution and teach the audience to build their own optimized solution to deliver instant OTA updates for React Native.

Delivering instant update patches for React Native to 50+ million people

Building react components in isolation to fullfill business use cases and to achieve Zero coupling.

Automated browser UI testing using JavaScript and webdriver for your react components in isolation & how to avoid test cancer.

Importance of testing & the right way to test React components

Why - At Housing.com, when we moved to react from BackboneJS, we started gradually, creating components like just home page then list view, and so on. But we soon realised that, components(reusable components) are getting messier, since there are so many components just because everything is component in React. Components started growing like crazy.

Problem - Since we have our mobile website and desktop website separate (though we serve both with housing.com), we had to write same react components in desktop as well as mobile, maybe with just styling / css changes, but the logical flow & business use case of a software feature used to remain same.

Solution - Isolating bunch of components as a black box. We started creating npm modules, and including them in a code as a feature. So our isolated react component is not just a dump component, but it takes care of executing entire feature.

Going further and decoupling things - it was easy for us to figure it out, what should be isolated component, what should not be. I will be showing when to make Isolated component and when not to.

Using React storybook to build components in isolation.

Redux Store - Since its isolated component, we don’t share data, actions, store. Every isolated component works on its own store.

Isolated React Components as a Black Box with Automated UI Testing

Building user interfaces on the web is hard, because the web, and thus CSS, was inherently made for documents. Because interactive UIs fundamentally differ from flat documents, we’ve seen a mindset shift towards building component-based systems.

That progression has lead to a rise in options for including your CSS in your JavaScript code, much the same way that libraries like React have done for your HTML. But what can we learn from the progress of the past, and what do we choose to include in a new library?

This talk will cover how the design goals of styled-components have helped it become the most popular alternative for CSS-in-JS. But more broadly than that, it will look at the progression from documents, through components, to an exciting new possibility of an inclusive, unified workflow for UI on the web and elsewhere.

The road to styled components, and the road ahead

Fiber release brought with it some pretty cool features but the best is yet to come!

First, let’s talk about array children, error boundaries and renderToStream. Then, I’ll give you a sneak peak into one of the upcoming features that might change the way you build your React applications. Portals open up a lot of opportunities and traps!

Let’s explore 2 of them: reducing client bundle sizes and easier state management.

A portal to the future

This talk assumes basic familiarity with Redux. I would use half of the talk to explain what are generator functions. Generators are very different from anything javascript has had in the past. This turns off many people to adopt Redux Sagas as each heavily relies on generators.

The remaining half I will cover how we handle async actions in projects at Mapbox. The problem with redux-thunk and how Redux saga helps convert async control flow to a more synchronous like control flow.

Better Async with Redux Saga

With most apps being built with React these days and Redux being a very popular state management library, have we identified a standard pattern for consuming APIs?

What about JWT, automatic retries, caching, optimistic updates and handing failure?

This talk approaches all of the above and identifies reusable patterns to make this a breeze.

Consuming services reliably in Redux without losing your mind

React is one of the most popular libraries for front end development. With its dramatic rise, there have been considerable amount of patterns that have emerged out while breaking the applications into independent components. While some patterns enhance the structuring of client side components and improve the overall engineering process, others cause unforeseen problems in the long run.

This talk focuses on the following key aspects:

1) Recognising few of such componentization patterns
2) Understanding their pros and cons
3) Going through some sample case studies

Componentization Patterns in React

The talk will draw on our learnings from the efforts that we undertook earlier this year to improve UrbanClaps’s website performance, resulting in a 60% reduction in load time. All our efforts towards performance engineering can be bucketed in roughly two areas: ship less assets and tweaking order of delivery of assets. 

In this talk I will primarily focus on the former with key emphasis on how to really optimize bundling via webpack. All of this was done in the context of a large production app with constraints on product, business and user experience.

Improving Load time of a Production React App

This talk shall focus on DraftJS, a rich text editor framework built for React apps; and how it leverages ImmutableJS; for managing the state of an editor in its entirety, with sufficient examples.

The key takeaway insights of the talk include:

- How DraftJS works under the hood — “What goes into”, and the “How to” of building rich text editors for React applications
- How one can use ImmutableJS API, to manage DraftJS’s immutable data structures (apart from the DraftJS’ user-facing API)
- The role of immutability for data models in your own application
- The intended audience of the talk are JavaScipt developers who’re acquainted with ReactJS, who are either: interested in building rich text editors, or interested in learning about ImmutableJS, and the benefits of immutability, and immutable data in their apps.

An intro to DraftJS, and its immutable data model

2017

On React, front-end engineering and performance. 

After successful editions in Bangalore, Pune, Hyderabad and Mumbai, ReactFoo travels to Delhi. 

The Delhi edition will focus on the following topics:

- Performance and React.
- Performance, in general.
- Architecture with React.
- Alternatives to React – such as Angular, Vue and other frameworks – why these worked / did not work for your use-case.
- Mobile engineering with ReactNative or alternatives.

ReactFoo Delhi is an event for JavaScript, React and front-end engineers.

2018 Delhi

On React, alternatives to React, React Native and front-end engineering. 

Struggling to define performance metrics for your React app? Wondering how to build reusable UI? We’ll discuss these questions and more at ReactFoo Hyderabad on 17 March. Talks and Birds of Feather (BOF) sessions will cover:

- Frontend workflows and product development with React.
- Alternatives to React including Vue, Angular and Ember, and how to evaluate these.
- Pros and cons of moving to ReactNative for mobile app development.
- Testing with React.

ReactFoo Hyderabad is a single-day event for frontend developers, JavaScript developers and all those interested in building better User Interfaces.

Hasura is a tool that helps you develop and deploy production ready apps fast. It comes with features like Authentication, JSON APIs over a postgresql database, Email/SMS and a store to upload and download files from. Basically, we have picked the most painful and most repetitive features of app development and converted them to easily consumable APIs so that you can concentrate on building your app and focus on custom APIs rather than re-invent the wheel.

Deploying your app and changes to production are as easy as executing a git push command.

Painlessly develop and deploy your react app using Hasura

Higher order components (HOC) and render props are two advanced react patterns which help in reusability and composition of components. Both of them can easily be interchanged in their respective use cases, but they do have fine lines of distinction. I wish to explain the use cases of HOC and RPs and their respective pros and cons so that you can apply them to your daily code as need be.

Demystifying Higher order components and Render Props

This talk focuses about what new changes are recently made into react and upcoming changes in the api. Since React 16(fiber) has been completely rewritten, what it means to react developers and what breaking changes will happen in future and some basic examples about upcoming react API.

Future of React

The complete session is to spread awareness about the benefits of Redux Framework in the Javascript. My main agenda is to discuss on how we transformed core Angular 2 application to Angular2 Redux application to pitch the loopholes faced in core. The main takeaway for the audience would be learning the best ways of using Redux in the ecosystem. I’m going to put lights on ECMASCRIPTS basics as well to give non JS programmers an overview of the technology being used for interaction.

Leveraging Redux in Angular2 application

A head-on comparison of the two trending UI libraries to discuss their similarities, differences and design decisions undertaken.

React to Vue

- Myths & Misconceptions We will talk about the misrepresentation of Vue in React community, general beliefs, and set biases.

- Feature Comparision We will find similarities between the two and discuss how few design decisions put them on different paths.

- How’s How We will compare some vue and react code examples.

- The Vue Ideology We will talk about unspoken precepts shaping and improving the Vue ecosystem.

- Take Away A quick summary and we will list key takeaways.

React to Vue: why and how?

Most of us work with designers and other developers on a daily basis. It isn’t always easy to maintain quality and consistency across teams or even features. Collaboration isn’t always easy with spec handovers, component states, achieving pixel perfection, etc.

Design systems have become really popular in the design world in the past couple of years and for good reason. React’s methodology of thinking in components along with recent tools like react-sketchapp make it feasible for designers and developers to work on a single system.

We need to talk about our frontend workflow

Although, usage of react is growing rapidly, most of us not aware of its best practices. Thus, we remain devoid of harnessing full power of react. In this talk, I propose to talk about how to identify problems in your react app and how to fix some of the most common ones.

Profiling and Optimizing Performance of React Applications

Transactional apps are nothing but simple conversational flows between the User and System. They can be written using a simple UX DSL leveraging continuation passing style (CSP) semantics. Despite this being the most important problem to simplify, we find that the current frameworks complicate the building and maintenance of transactional apps, requiring heavy investment in engineering effort and the development process is not a pleasant creative experience.

At Juspay, we saw no reason for this to be the case, and set out to create a framework to dramatically lower the barriers of entry for quickly building out solutions to typical real world applications. Being strong believers in the functional programming paradigm, we abstracted out all the parts of an app as extremely composable lego blocks / pure functions.

As a JavaScript house, we explored a number of options and chose PureScript as our core
language. Purescript has the conciseness of Haskell paired with the ubiquity of the JavaScript interpreter. The UI components and business flows are simple pure functions that are reusable across apps. The frontend and backend are unified, represented as a continuation of flow between the client and server.

In the last several months, we have made major strides towards allowing everyone in our company to be able to examine and write the code of the apps we are building – from fresher to product manager to designer. We have trained around 100 interns on Haskell and PureScript to work on our platform in production. We have been able to deploy this framework into production in serious payment and banking systems.

In this talk, we will share our experience building apps using Presto, a FP based DSL. We will also see how Presto can be used with React.

Presto – building cross platform transactional apps using functional programming

Redux is amazing, MobX is awesome. They both solve the problem of state management in complex React apps, but they have vastly different philosophies and approaches to doing so. Redux championed highly predictable UI state as an immutable data structure, MobX showed how observables get the work done with zero boilerplate. 

Mobx State Tree (by the author of MobX) is a snapshot-able state container that brings together the best of both these worlds. It eliminates the complexity involved in maintaining explicit actions and reducers while providing highly efficient reactive state derivations with replayable actions and time travel. 

In this talk I’ll take you through a small React project leveraging the best that MST has to offer.

Next-gen React state management with MobX State Tree

Cheapass.in was an Indian e-commerce price drop alerting system. It was used by over 7.5k users, and at shutdown, it had sent over 6,50,000 price drop alerts. This talk will walkthough the learnings I had as a solo developer/entreprenuer in building a product for Indian consumers - with both technical and business aspects to it. 

I’ll talk about how I built and scaled a full stack JS application over a span of 3 years - managing NodeJS servers, MongoDB, Android and iOS apps, Web clients (including a website, bookmarklet and a twitter bot). We’ll then look at replicating core product offerings by adopting a serverless architecture using Zeit Now, AWS Lambda and Google Firestore. 

This talk covers technical, growth marketing, and business aspects of building a product and is, therefore, intended for anyone interested in listening to a real story behind a real product.

Journey of Cheapass.in: A side project to a DIY platform

2018 Hyderabad

On React, alternatives to React, React Native and front-end engineering. 

After successful editions in Bangalore and Pune, ReactFoo travels to other cities like Hyderabad, Mumbai and Delhi. The Mumbai edition will focus on the following topics:

- Success and failure stories of implementing React and React Native for your use-case.
- Your experiences with alternatives to React – such as Angular, Vue and other frameworks – why these worked / did not work for your use-case.
- Front-end architecture patterns and approaches with React.
- Mobile engineering with React Native or alternatives.

ReactFoo Mumbai is an event for JavaScript and front-end engineers, cross-platform developers.

My main focus is to show how react canvas can be used to optimize scrolling performance and avoid the jank which we experience while showing complex animations on mobile web. I will go through the problems we face while currently doing complex animations, and how we can use react canvas together with our other components to optimize rendering performance and get a seamless native like experience on mobile web.

Why we should use React Canvas

Joint Q&A on state management, ReactNative and full stack web development

There was a lot of speculation of the stability Context API in future releases of React. React 16.3 makes Context API official now. Although developers were warned against using it, Context API was internally used by a lot of state management and theming libraries like react-redux, react-router and MobX-react. We will explore all about this API.

Outline:

- What is Context API
- How Context API helped redux and router
- Why were developers warned against using it
- Using Context API for our apps

All about Context API

Small team when bombarded with lot of work across different projects, you need determine common patterns; be it from designs(CSS), libraries(JS). This sets desired abstractions for other projects, prevents them from repeating code and hence adding more error hooks. How do we solve things of reusability? How do we accommodate desired changes to abstractions yet giving individual projects to use different variations.

Outline:

a. How do we solve things of reusability? - We chose React to reuse Components and build abstraction layer with CSS.

b. How do we accommodate desired changes to abstractions yet giving individual projects to use different variations? - We used yarn workspaces to create tiny internal libraries and maintaining versions by pushing libraries to npm and using SEMVER.

How initial designing for older apps helped small team @Agrostar deliver apps quickly

In this talk, I will share our experience with migrating a large app from redux to apollo. Initially, we used redux to manage the state of react application. As the app grew in size, we were writing lots of custom logic for network use cases like data fetching, real time updates and error handling. We implemented abstractions to reduce verbosity of network logic. But, onboarding new developers and adding new features was hard because of the home-grown abstractions. We found GraphQL and Apollo in our exploration to simplify the network logic.

GraphQL and Apollo helped us a lot in simplifying network logic on both back-end and front-end code.
After migrating the network data from redux to apollo, only a small amount of local state is remaining in redux store. Apollo 2.0 supports local state management as well. So we migrated local state also to apollo and completely removed dependency on redux in our codebase.

Outline:

- Challenges of redux and complex network logic
- How GraphQL and Apollo can simplify network logic
- Methodology for incremental migration of app from redux to apollo
- Local state management with Apollo

Migrating from redux to Apollo

Systematic designs have been prevalent across other design mediums - but only now they have got the required attention in the digital product design world. The proposed talk will discuss the what, why, when & how of Design Systems in digital products - whether apps, or websites or brands.

Dr. De Sign Systems - Or How I Learned to Stop Worrying and Remove the Chaos

When JSON response is too big, it takes time to render first fold UI and which hinders UX. How bookmyshow is planning to enhance UX by using JSON chunks rather than waiting for the entire JSON response and then render. Which lowers bounce rate.

JSON Streaming and React

Webpack is the de facto standard in todays world of frontend development. Popular projects like React, Vue, Angular use it all. But how did we get here? How can you not be scared of it and actually start configuring it for your own projects?

I am going to take you through the past of JS bundling, how webpack came into picture. Show you how you can build your own configuration files and make the webpack nightmare go away.

• How did it all start?

Bundling in JavaScript started with the aim to avoid the 6-connections-per-origin limit and the bottlenecks of HTTP/1.1. Concatenation was the primary way of bundling for a long long time.

• The problems with concatenating

• The need to reuse nodejs packages in browser.

• How browserify came into the picture

• Efforts browserify put into making things work.

• Introduction of Webpack in 2015

• How webpack broke the rules & why

• The backlash webpack gets about its configuration complexity

• Live Demo - handcoding a webpack configuration file

• What to do next?

• What’s new in webpack 4.

• Resources to learn more.

A re-introduction to webpack

React Native is slowly becoming the preferred choice for developing mobile applications. If you are already a web developer, you will find that most of the principles of coding remain the same as it uses the same design as React. But the development flow might feel a bit overwhelming for someone who is creating a React Native app for the first time.

In this talk, I will describe the various tools and methods that can simplify your development workflow. I will talk about the whys and hows of debugging, performance optimizations and improved release cycles so that the next time you are developing a React Native application, you feel at home.

This talk will involve the following:

- Intro to RN (brief intro)
- The description of the options available on the developer menu.
- Hot reloading vs Live Reloading. (when to use what)
- debugging code using react native debugger/reactotron
- Getting rid of performance bottlenecks (identification and fix)
- techniques to achieve the goal of faster release cycles.
- The approach to fixing a production bug (codepush and how it can help)

React Native: The Development Flow

This talk focuses about what new changes are recently made into react and upcoming changes in the api. Since React 16(fiber) has been completely rewritten, what it means to react developers and what breaking changes will happen in future and some basic examples about upcoming react API

- Fragments
- React Portals
- Context API
- Error Boundary
- Render props
- refs

2018 Mumbai

After a successful first edition in Bangalore, ReactFoo travels to Pune. ReactFoo Pune will focus on the following topics:

- Success and failure stories of implementing React and React Native for your use-case.
- Lessons learned in shifting codebase from older frameworks to React.
- Comparative advantages of React and other JS frameworks.
- Comparative advantages of React Native in working on mobile applications.
- Security concerns.

ReactFoo Pune is an event for practitioners, by practitioners.

The talk would focus on how BookMyShow benefitted moving to React. It not only helped us moving from the legacy php code but also drastically increased conversions in 4 weeks.This would also focus on what challenges we faced while moving for php to react. What made us build a PWA even when we had apps. Moreover the success stories after we moved to React.

Migrating from PHP legacy code to React & Best Practices in React

At Haptik, we use React extensively. In fact, 5 out of our 5 heavy lifting customer facing Apps are written in React.

But this was not the case always, we had to try a whole lot different technologies to fail and then move to React 2.5 years back only to succeed. React has, in fact, made our frontend journey very simple.

This talk will revolve around how React has helped a startup to build and ship great bug-free and good looking products. How React eased our process to get started, our learnings to build extensible products and things we did wrong (and learned from).

We wish to give back to the same React community who has helped us grow extensively in our journey.

How React shaped Haptik’s frontend story

Extract the most out of your Redux Store.

Redux Deep Dive

Have you ever come across a situation where you want to pause function execution for some time, for example, when you’re waiting for an API response and based on it you want to perform different some action? Or you’re waiting for your database sync to finish? If it sounds relatable, you probably handled such cases using Promises/Redux-thunk, etc. but this talk will provide a cleaner solution for dealing with such async tasks, using Redux Sagas.

Redux Sagas take advantage of an ES6 feature called Generators to make such asynchronous flows easy to read, write and test. This talk will focus on exploring Generator functions, and see how can we take advantage of it to deal with async operations and make our lives simpler.

Let's Sync the Async : A Primer on Redux Sagas

I worked as an Angular developer for 3 years from version 1.x to 4. Then I had to shift to React in my new company. This is a story about what I had to learn and (more importantly) unlearn while switching gear from Angular to React.

An angular developer moving to React

React Portal is a new feature of React 16. Although it’s quite a handy way to show Modals and toast message, there are concerns around if it’s really a good practice to use portals and jump your code out of the Component heirarchy. We will explore how using React Portals will actually make you a better programmer.

Deep Dive into React Portals

React on it’s own has a very small API surface. Most of the magic happens in user-land. It feels like every month, someone from the community finds an innovative way of writing components. This is the best part about React, the creative community.

Our team obsessed over code quality and maintainability but we didn’t always know the right way as we’re all learning together.

I’m going to be honest, this stresses me out. I have a constant fear of missing out on the cleanest/prettiest/smartest way of writing React components.

So, I sat and learnt all of them, so that you don’t have to.

Advanced React Component Patterns

React has enabled us to write complex UIs with a great declarative API. Under the hood, React’s reconciler optimizes by diffing the old and new tree, usually known as virtual DOM diffing. The latest version of React uses a Fiber architecture to implement the reconciler. The reconciler backs custom renderers like React DOM and React Native to target various platforms. 

In this talk we’ll implement a custom renderer with react-reconciler. We’ll also take a brief look at various custom renderers in the wild to have an idea of what can be achieved.

Building custom renderers with react

If you are a React Native developer, you build native mobile applications using JavaScript and React. However, you are dependent on a backend which you will definitely need to handle tasks such as push-notifications, authentication, chats etc. Given that you know JavaScript, you can easily learn to write a backend server and achieve all the aforementioned tasks. Also, you can deploy them very easily using Docker and Kubernetes.

This talk is about setting up a custom API, deploying it and integrating it with a React Native application. We will go over writing a simple nodeJS server with functionalities like push notifications, web sockets etc and integrate it with a React Native Application. Finally, we will talk about an efficient way to deploy this server.

Fullstack React Native

We made it easy for you! Painlessly develop and deploy your react app using Hasura

Facebook built React Native but it was too big for our SDK product. Necessity drove us to build a small ReactNative - PrestoUI.

The talk will detail what we learnt, using it for BHIM and the new ways of building applications we found along the way.

Why we built a 35kB React Native alternative?

Progressive Web Apps (PWAs) are spreading across the web faster than anyone could have predicted. Combining the best of both the web and apps, PWAs load quickly (even on flaky networks), can re-engage with users by sending push notifications, have an icon on the home screen, and load as top-level, full screen experiences.

In this talk, I’ll explain how to build one with React from installation to caching strategy, implementing push notifications, handling updates along with useful resources. I’ll also explain how to get the best of Lighthouse in the process.

PWA with React

While webpack continues to become more and more popular and de-facto choice of module bundling in an increasingly ES6 and ES7 centric world, its VERY easy to get lost in all the hoopla of getting the webpack to work.

What the developers end up with is - huge bundles for your application - which are slow to load up and degrade user experience.

The talk will showcases such scenario, introduce tools and fixes to alleviate the issues.

At the end of the session, users will know how to utilize Webpack more optimally.

The dark art of webpack bundle tuning

2018 Pune

On React, alternatives to React, React Native and front-end engineering. 

ReactFoo Bangalore comes back to its original home after completing five successful editions, India-wide.

ReactFoo Bangalore will bring together 250 developers working with React, and who are invested in building a space for conversations around experiences using React in production.

At the core of using React is writing components.

In it’s early days, React got popular because of it’s composition model. The contract with the framework is that we’d write good components and React will take care of the rest.

This is a collection of evergreen tips/advice that I’ve learned over the course of 3 years working with React - building products for users, a design system and a few open source libraries.

Writing good components

We at Treebo love React Native, and over the past 2 years of us using it, we made a lot of mistakes. Some we fixed, and some we continue to fix. In this talk, we want to share with the community our experience and journey of building a React Native App for scale.

In this talk, I will be speaking to you about Treebo’s experience with React Native. I’ll be talking about HOW WE FIXED the following 8 mistakes that we made over time while building our app:

- Library Stupidity
- Chaotic Rules
- Bad Debugging Experience
- No CI/CD or Test Automations
- Unsystematic Components
- Janky Performance
- Poor Production Performance Monitoring
- Engineering Baggage

The mistakes we fixed - A retrospective of the Treebo mobile app

React Native is a great way to build native apps for iOS, Android and other rmobile platforms. In this talk, we will look at the internals of React Native, and how code written in JavaScript can power a fully native mobile application. We will look at the various parts of the system like the bridge, the UI manager and the plugins. We will also touch upon the rendering process and compare it to React’s rendering on the web. We will look at some of the new and exciting improvements powered by Fiber, and talk about the the interesting experiments and upcoming features. 

This talk stems from my experiences as a web-developer newbie on the React Native team, and is an attempt to document my journey in comprehending the code base. At the end of the talk, the attendees will not only be able to build React Native apps, but also understands how it all works together.

Building React Native

AST’s are everywhere. They are a part of majority of our tools that we use today for development. We use babel, eslint and AST’s power them.

Come join me in this journey of understanding the magical land of AST’s by creating babel and eslint plugins and writing custom codemods.

Being a software dev for more than 4 years now, I was always curious to understand how these instructions that we give to our machine’s get understood and sometimes modified for optimizations.

It was initially scary because to me it appeared to be really complicated and would require me to understand the nuances of how machines work, which basically means understanding how a kernel works, how bits and bytes work or taking a deep dive into how compilers work.

But turns out it is not as complicated as I thought it to be.

So let me take you all to this magical journey of understanding how AST’s work and how we can all, no matter what our experience is create something really interesting using AST’s.

By understanding them we would also:-
1) Become better at writing our JS code
2) Better understand JS scopes
3) Better understand how compilers/transpilers work
4) We would be able to write our very first babel plugin
5) We would be amazed when we see how easy it is to write our first eslint plugin
6) And we would learn about this cool new thing called as codemods using jscodeshift

The magical land of AST's with babel, eslint and codemods

We have already seen how React Native and React Native for Web helped us in building full-fledged features on all platforms such as Android, iOS and the web. After solving this problem of code sharing, the next one we are headed to is solving the case of custom layouts. For instance, an e-commerce product page could have different UI layouts for a shirt, a sofa, and a mobile, though their basic building blocks are just the same.

At Flipkart, we have tried to flatten this multi-dimensional world into a unidirectional one by building a widgetised framework and extending functionalities of React Native. This talk will elucidate my journey of building cross-platform applications where we break down the UI into simplistic, shareable UI elements called widgets and render them depending on the layouts required. For example, the layouts configured from backend gives the front end capabilities of intelligently rendering the widgets in the specific order and change them as and when required by the switch of flags.

This talk will cover my journey of realizing the efficiency of cross-platform code written via React Native and React Native for Web, not only in terms of minimizing redundant code writing for developers but also giving them independence on the business vertical they are building for. I believe, it is a resource optimization for teams in a product-based firm and also helps to divert more concentration to platform-specific enhancements.

This talk will broadly cover the following:

1) Discussing the basics of React and React Native for web and how we coin the world “Native” in terms of code and usability.

2) Furthering to the next step of optimization by adapting the widgetisation of the UI and offloading the capabilities to configure custom layout to the backend.

3) Discussing the way we can build a system to configure styles, layout and order of the widgets on any page of the website/application based on the business requirements.

4) How small and medium product companies, independent developers can leverage this framework in tandem with adapting to React-Native.

5) While everyone codes using React Native, how platform specific experts can spend time enriching platform related capabilities.

6) Calculations and mathematics on optimization of developer resource and reducing the time of delivery of features.

A React Native widgetised framework - Move fast and build things

In a company, as the technical teams grow and work on different projects, the question of creating a set of common components naturally arises.

This is what happened to us: over the years different teams redeveloped very similar components, from simple UI elements to complete business features. 9 months ago, it was time for us to take a step back and think: how can we do better?

This talk will present you our journey toward:

- What we’ve tried in the past… and the reason behind many failed attempts. 😢
- The technical design that worked for us, a mono-repository architecture with helpful tooling: Verdaccio, Lerna, React, Flow, Storybook, Yeoman… 🤓
- The indicators and processes that we set up to ensure that we maintain a good quality and speed of development. 📈
- And finally, the most important: how to onboard other teams in this long running task. 🧐

Today, five teams re-use and contribute to our common libraries on a daily basis, and other departments are expressing a big interest in it. And we even worked through extracting performance indicators, proving us that it was worth maintaining such a collaborative project - that could help you convince your co-workers that it’s worth investing time in such a project. You won’t regret it!

Kickstarting a library of internal React components for multiple teams

Today we have many frameworks available for front end development. Frameworks play a large role in how apps get built and designed. In this talk we are going to focus on the design and architecture, module design and consideration, build & release process and on performance metrics.

We used React for development of the project to host & support multiple applications. This meant that there will be multiple teams developing their applications, each having its own release cycles and codebases, and yet integrating all of them as single application with seamless user experience.

We will start with UI architecture of the application and talk about component structure and granularity. Then we will look into the release process and continuous integration and deployment for supporting multiple teams and applications, and then look into the performance metrics.

I have been working in developing JS applications for past few years. Currently, I work at Walmart Labs, improving products and solutions for business users. Previously, I had given a talk on “Webcomponents and Angular” in Google DevFest 2018 at Bengaluru.

Delivering JS applications at scale

Apollo is the most popular GraphQL client library at the moment. It significantly reduces boilerplate code for fetching data, showing loading status, handling updates to existing objects in cache. 

But, it can’t handle scenarios like creating new objects, deleting objects and real-time updates automatically. It requires significat amount of code to handle these scenarios and, sometimes, requires more effort than other solutions. 

In this talk, I will present how to leverage customizable cache and link interface of Apollo to simplify logic for these scenarios.

We might also hit performance issues with Apollo as the number and size of queries increase. I will talk about how to debug and fix these performance issues

Deep Dive into Apollo Client

We are an organization which built one of India’s leading crypto currency exchange, and faced the struggles and wrath of scale and lack of scale. Backed by a prominent company, the effect of a successful PR and a wave of customers based on current trends, brought us thousands of customers flocking into a platform primary built on Ruby on Rails (both frontend and backend).

However, as the customers inflow grew, our poor old stack couldnt bear the grunt, and fell short, customers being unable to trade and perform fund transactions in near realtime. We introduced lot of changes, yet couldnt handle the scale with a frontend+backend combined stack.

Learning from our mistakes, we rebuilt our entire platform from the ground up, isolating the front-end introducing React, and with a multitude of changes for the backend. After doing an intensive round of testing, we are happy that we have grown exponentially when it comes to handling traffic, and the use of a pure-frontend stack offering better customer experience even during backend outages or delays.

Keytake aways from the talk:
1. Learnings - Disadvantages or rather limitations of using a combined stack for frontend/backend
2. Choices on way forward - Options, suggestions and expectations
3. Learning curve and adaptability challenges
4. Mental roadblock and inertia on thinking
5. Overcoming challenges, and implementing
6. Difficulties faced while transitioning and road ahead

The talk will be presented by myself, Sreekanth GS (CTO, Hatio Innovations). Intending the talk to be of a free-flow format, primarily discussing on merits of taking up an endeavour to rewrite a full stack adopting React as well as the challenges and difficulties faced.

General flow:
1. Introduction and pep talk
2. Pitch on what we did and what we did wrong
3. Summary on expectations from a solution
4. Options and choices on achieving the solution
5. Nitty-gritties of choices
6. Adoption and roadblocks
7. Overcoming roadblocks
8. Implementation strategy
9. Test on success of solution implementation
10. Way ahead and the future