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.

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

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.