React India is an international community-led non-profit initiative that provides a platform for developers to share and discuss their insights and experiences with React. The three-day conference is the first of its kind in India.

The first of the three days will be focusing on workshops and the following two days will be dedicated to talks on topics revolving around React, React Native & GraphQL. The conference will bring together front-end and full-stack developers from across the globe to Goa, India. 

In this single track event, you will learn more about React and everything related to it while meeting some of the leading talents from around the globe in the developer community. In addition to enjoying the event, this is also your chance to explore Goa! Regular and lightning talks will cover various topics related to React.JS and FE, including React Native, GraphQL, VR and AR, Redux, Preact and more!

React India

2020

React India 2019 Highlight 🇮🇳

How can we create intentional deliberate experiences on the web? What can we expect in the future from React and the web platform?

Thousands of words

Eesh and his team has built a single GraphQL endpoint at his company to remove the dependency of the react client with the Rest API.

Eesh and his team has built a single GraphQL endpoint @Cleartrip to remove the dependency of the react client with the Rest API. This will avoid the unnecessary over fetching of verbose data and manipulation on the client, making the react client cleaner and faster (3 → 0.2s document load).

I will also talk about how we improved page load time using redis caching at Graphql server and monitored the results using new relic.

Reactive journey from 3 to 0.2s using Apollo GraphQL, Redis Caching and Monitoring

One of the nuances of working in frontend is constantly being told that [insert whatever tooling, frameworks or technologies here] are “super simple” or “easy to pickup”.

One of the nuances of working in frontend development is constantly being told that [insert whatever tooling, frameworks or technologies here] are “super simple” or “easy to pickup”. While on the surface this seems great, the reality is that many of these technologies are riddled with syntax quirks, incomplete documentation and a high barrier to entry.

In this talk, we’ll discuss why truly intuitive tooling doesn’t exist, go over some common misconceptions in the React community and learn more inclusive ways to talk about emerging frontend technologies

"Intuitive" Tooling

What can we do to lower the feedback loop and make it easier to create beautiful websites and apps?

Building websites is a very visual process. The goal often is to make a website that is visually appealing and easy to use. However, we're always building websites with code. Changing margins is done by typing, changing font styles is done by typing, and every change often requires you to wait a while before you can see the result.

During this talk I want to explore how we can make our development tooling more visually oriented. What can we do to lower the feedback loop and make it easier to create beautiful websites and apps?

What I learned from building CodeSandbox

Learn about how we, at Netflix, hacked Webpack for our needs, to serve unique user experiences to millions of Netflix customers across the globe.

Learn about how we, at Netflix, hacked Webpack for our needs, leveraged Abstract Syntax Tree (AST) to identify conditional dependencies in our dependency graph and glued them all together to build a highly scalable, server side JS and CSS bundler, that serves these unique user experiences to millions of Netflix customers across the globe.

Conditional Modules & Dynamic Bundling, A Netflix Original

React for teenagers

What if it was possible to build backend features for our react apps in the same way that we use redux in our react apps? 

What if it was possible to build backend features for our react apps in the same way that we use redux in our react apps? 

In this live-coding demo, I will show you how we’ll add backend business logic using the redux abstractions of dispatching actions, writing reducers as pure functions and subscribing to updated state. 

Our backend will be completely serverless and using open-source and managed services so that we’re not actually deploying and maintaining any servers. We will use GraphQL mutations from our React app to dispatch actions. These will trigger serverless functions which are pure and return the modified state, which will be persisted safely on a cloud managed database. 

Portions of your app that are subscribed to the state using GraphQL subscriptions (live-queries) will automatically update! You will witness the raw awesomeness of being able to use JavaScript and GraphQL in a pattern that you are comfortable with to build backend features from scratch

Build your backend with GraphQL & Serverless in Redux style

This talk focuses on using the power of React and the platform together to build a fast and performant music application.

React is a brilliant JavaScript library for building simple and complex user interfaces. It is quite performant when used correctly but there are times when the library alone is not enough to achieve what we want. 

This talk focuses on using the power of React and the platform together to build a fast and performant music application. It will involve using the different threads, web features and React in sync. 

I will be talking about the journey of converting an idea into a product and different decisions I had to take both in regards to design and implementation.

Beats on the web - A journey into performance

WebVR is a new technology and developing in it is exiting. Just a few steps can result in magic. 

WebVR is a latest technology and developing it is not boring like lines and lines of code to get a small VR experience. Just a few steps to do the magic. 

If one is interested to learn the tricks of the magician and get the secrets behind the screen revealed then there you are, must attend my talk to get the cats off the bag. Also, having been contributed for Mozilla since 5 years I will be also dealing with how A-frame can help in this web driven technology of WebVR. Also get some free tips on how your React.js can get a VR effect in just a snap of finger.

WebVR - the Disruption in Immersive Space

You need tools! You need abstraction! You need patterns! You don't want the same code to be written multiple times everywhere. How do you do that? 

Let's face it, writing React apps with GraphQL is verbose. Your team took up a massive application write using React + GraphQL. It has a team of 200+ developers working on the same codebase. You need tools! You need abstraction! You need patterns! You don't want the same code to be written multiple times everywhere. How do you do that? 

Here comes middlewares on the frontend, links from Apollo, Observables and ASTs to ease your headache and make sure that you increase your team's productivity by making everyone write less code. Whether you are a single developer in a small startup or a big team working on a massive project, you do want to have these tricks up your sleeve!

DRY when writing a GraphQL React App

See how developers are using GraphQL as an API gateway to accomplish things that you may have never thought possible.

As GraphQL moves into the mainstream, the tooling & ecosystem has grown and has made it possible to do much more with GraphQL than using it as just a data layer. 

In this talk, I'll show how developers are using GraphQL as an API gateway to accomplish things that you may have never thought possible.

Curious Cases of GraphQL

Once we receive data from an API, how do we manage it on the GraphQL client side? How do hooks work with GraphQL? 

Once we receive data from an API, how do we manage it on the GraphQL client side? How do hooks work with GraphQL? How can we leverage Apollo client to manage our state? Can we use Redux along with GraphQL ? 

In this talk, I will be answering these questions and talking about state management solutions that work well with GraphQL. I will also be talking about the GraphQL journey at PayPal.

GraphQL State Management in a React World

Learn about the characteristics of thriving open source communities and how to create a healthy, welcoming community of your own.

Done well, open source is one of the highest-value targets for businesses these days. Companies like Facebook and Airbnb leverage OSS as a source of brand equity and recruiting, among other advantages. However, OSS is still uncomfortable for many companies — and even if they do open source their tools, these projects often fail to launch — because they’re missing the most important (and best) part of OSS: the community.

Projects that survive in today’s landscape have thriving communities that care deeply about the quality and advancement of open source and the people using it. But open source can also be intimidating to newcomers, and occasionally unwelcoming. 

In this talk, learn how popular open source framework Gatsby has doubled down on community, including: 1. Offering open pair programming hours 2. Trusting all contributors with merge access 3. Sending free swag to contributors... And much more! 

Learn how you can borrow our strategies to create a healthy, welcoming community for your open source projects, starting today!

You Belong Here

Learn how to identify code smells in your React app and how to improve it.

This is a talk about code quality for people already working with React. Learn how to identify code smells in your React app and how to improve it. Let’s pair program to refactor some okay-okay code to make it great code.

Refactoring React

Why performance is important?

React Native allows you to re-use your web code to build native applications. This approach is simple in theory, but challenging in practice.

React Native allows you to re-use your web code to build native applications. What’s not to like? This approach is simple in theory but challenging in practice. In this talk, you’ll learn what is re-usable and what isn’t, the intricacies of shared code bases, and cross-team communication when building React and React Native apps at the same time. With real-life examples, code snippets, and memes, you will learn everything you need to know to get started on your native journey.

Going Native

Why are we afraid of updating our React app on Friday evening?

Why are we afraid of updating our React app on Friday evening? Mostly because its hard to know if nothing is broken because manual testing takes time and automated testing was not reliable. (And we really want to go home). With cypress things are different. 

In this talk, we are going to cover how to start covering your React app with e2e tests and showcase coolest features that cypress.io has to offer. Automated tests dont have to be boring, difficult to write and even harder to debug. We deserve to have tests we can count on, even when shipping stuff as soon as ASAP

Sleeping well at night with cypress.io

React is not only well suited for designing static components, but also for rapid prototyping with interactions.

The almighty React is not just for developers, it's for everyone! It leaves no one behind. With React's component-driven architecture, UX and web designers can make use of this quality and integrate React in their workflow to bridge the gap between design/prototyping tool and what actually goes on the web in production. 

This talk explores the topic on how React is not only well suited for designing static components but is well suited for rapid prototyping with interactions.

React for Designers

Inspiring talk about the web as a platform, React and its community, their future, and inclusivity.

According to npm, 63% of JavaScript developers use React. This is for a good reason: of all the ways we’ve tried building applications on the web, React seems to have chosen the right tradeoffs to make developers and teams happy and productive. 

React is eating the web.According to its website, React is a JavaScript library for building user interfaces. It’s also an ecosystem of open source tools and development practices. But most importantly, React is a community of people with a firm grip on the steering wheel of web development and where it’s going. Do we know where we are going? When do we know whether we’ve gone too far? Siri, how can we build the best products for our users, while ensuring the continued health of the open web? Siri?

Jani is part of the React industrial complex. At his job at Formidable he helps companies and teams build software with JavaScript and React. He advocates the use of React in his conference talks, open source projects, workshops and writing. In this talk full of industry insights, real-world anecdata and many unpopular opinions, he’ll offer his industry insider point of view on where we as a community of developers may have lost the plot, and how we can do better.This is a wake-up call, and the call is coming from inside the house.

React, Collaborate and Listen

What are the major factors that slow down a web application written in React? Can we mitigate them? If so, what are the trade-offs. 

What are the major factors that slow down a web application written in React? Can we mitigate them? If so, what are the tradeoffs. 

Pavitra will be speaking about perf improvements we made in our large application. From state management to measuring correctly to dealing with legacy frontend, this talk will cover a variety of reasons why things got slow. And how to deal with it.

A Journey to the Center of a Slow React App

Operating on files (and images) and extracting crucial information out of them in the browser can be tough.

Operating on files (and images) and extracting crucial information out of them in the browser can be tough. Performing this while keeping the main thread free can be tougher. 

This talk will focus on the efforts made to streamline uploading product images by customers while they write reviews for the same.

Case study: High performance image upload for web

Offline-first apps have a unique set of challenges to keep them fully functional, even in offline mode.

Offline first apps have a unique set of challenges to keep them fully functional even in offline mode. On top of that, GraphQL based apps need new ways of solving these challenges. In this talk, I will share my experience with implementing offline first app with GraphQL & Apollo.

Building offline first apps with GraphQL & Apollo

Techniques you can use to authenticate your apps, with best practices and common mistakes.

Authentication in React and React Native apps is sometimes considered a painful as well as vulnerable point of any app. If you bring in GraphQL and SSR it can be even harder to implement with security in mind. 

In this talk we will talk about various techniques you can use to authenticate your apps and will focus on best practices as well as common mistakes people do when using various authentication methods

Authentication best practices in React and GraphQL

Preact and its ecosystem has recently undergone an overhaul. It now supports all the latest features from React 16, from hooks to suspense.

Preact and its ecosystem has recently undergone an overhaul. It now supports all the latest features from React 16 from hooks to suspense.

This talk will cover the how we got there and whats in the charts for us.I will also talk about how Preact guards and pushes your app performance with its Meta framework preact cli.

State of preact

2019

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.

ReactFoo

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

Building a highly scalable exchange - To react or not to react

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. 

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

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

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

Future of React

2018 Mumbai

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.

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?

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

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

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.

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.