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

ReactFoo 2019

Mar 2 | Bangalore, India