Summary of React Conf Brazil — 2018

Andrei Calazans
g2i_co
Published in
6 min readOct 26, 2018

--

React Conf Brazil

The second year of the biggest conference of React in Latin America gathered big names of the Brazilian React scene. This is a summary of everything that happened.

React Conf Brazil had impressive numbers this year, with 600 sold tickets and a waiting list. The event happened on October 20th, at Teatro Brigadeiro São Paulo. Many companies participated and sponsored the event. It was a great place to network with developers from all over Brazil.

Writing your own React Render
Raphael Amorim
@GoDaddy
Rio de Janeiro, RJ

Raphael dived deep in the process of rendering with a React Component. Explaining the React.createElement and how the reconciler is used by the Virtual DOM. His focus was about customizing the Renderer, he made a React Renderer to render a song as ArrayBuffers. At the end Raphael announced his plan to release react-ape, a react renderer to build UI interfaces using canvas/WebGL.

The power of SSR
Fernando Daciuk
@queroser.ninja
Curitiba, PR

Fernando Daciuk, Teacher and Developer. Deconstructed Server Side Rendering. At first he distinguished Client from Server side. Explained when we need SSR, it was interesting to learn that Google's indexing algorithm is capable of indexing client side rendered apps, but for other Search Engines and social network sites we still need SSR. He also talked about some pitfalls we can run into like not being in the same environment as the navigator, therefore not having access to the window keyword. At the end he mentioned the different solutions we have available to us.

Slides

TypeScript vs Flow second semester of 2018
Larissa Thaís de Farias
@VanHack
Joinville, SC

Larissa discoursed about static typing in JavaScript, told us about her experience while working previously at Rung and now with Vanhack. With these experience she researched about which static typer to use. To summarise she explained why she chose TypeScript although Flow offers easier on-boarding for beginners. More info can be found on her post about this talk.

Slides

A experience with open-source using React Native, GraphQL e Relay Modern
Luiz Fernando
@Popstand
São Paulo, SP

Luiz was in charge of making an App using React Native for the conference. In this talk he discussed the challenges he faced and decisions he made about the stack. App consisted of a React Native App consuming data with the help of Apollo on the client. It was interesting to hear Luiz' explanation to why he migrated from Relay to Apollo.

Slides

The journey of React Native at Globo.com
Raphael Porto
@Globo.com
Rio de Janeiro, RJ

Globo.com’s use case was presented by Raphael Porto. He participated of the transition of a Web View app to React native. Globo has 5 different apps, Globo.com, G1, GShow, GloboEsporte and Tech Tudo. They have migrated 3 of them to React Native: G1, GloboEsporte and GShow. They saw their audience peek during the last few national/international sport events and elections. Within the strong points he mentioned was the ability to reach a 98% rate of crash free users, and huge usability gains after migrating away from WebViews. He also mentioned some negative experiences they ran into like with Code Push which they decided to drop.

Slides

React Native at Banco do Brasil: How RN made us save 1500 hours per project
Guilherme Varandas
@Banco Do Brasil
Brasília, DF

One of the talks which caught the most attention was Guilherme's, a developer at Bank of Brazil, he helps maintain an App which does 600 million transactions. Due to difficulties with hiring since they are a partially state run company they needed to become more productive. To do this they made an App Container called GAM that works like a monorepo to make independent builds and generate APK/IPA. By doing this they inject native bridges and internal services as packages. According to Guilherme they are able to save up to 1500 hours of dev work per project.

Slides

Maintain WebApps in production without headaches
Hugo Bessa
@Telnyx
Santos, SP

The paradigms we see in all projects, how to think more towards maintainability and less in creation, not use your production environment as a playground, reduce the radius of impact due to errors and some other points were mentioned by Hugo for you to not have headaches.

Slides

Docz: from 0 to 5.000 ⭐️ in 2 weeks
Pedro Nauck
@Docz
Florianópolis, SC

Pedro went over the short history of Docz and what motivated him to create it. Talked about the challenges and list of rules he follows to make open source work part of his life. His talk was remarked by him asking his girlfriend to marry him ❤️.

Slides

Modeling GraphQL APIs
Renato Benkendorf
@Creditas
São Paulo, SP

Renato talked about how to model your GraphQL APIs in a scalable manner, see the slides for more information.

Slides

Taking ReasonML seriously
Marcelo Camargo
@Rung
Joinville, SC

We couldn't miss ReasonML, Marcelo talked about the beautiful things like type safety which ReasonML introduces to our code base with the help of OCalm.

Slides

Optimise your bundle with Webpack 4 and Create React App
Bruno da Hora
@Pipefy
Curitiba, PR

Pipefy is a process platform which uses Webpack to handle their bundle, Bruno was in charge of presenting about how Webpack facilitates and optimizes this process. He gave tips on how to deal with different environments, analyze bundle, use loaders and the types of code splitting we can do. Interesting to hear that with code splitting Pipefy obtained a reduction of 20% of load time and 75% of bundle size.

Slides

The Frontend Dichotomy
Sibelius Seraphini
@Entria
São Paulo, SP

The Front End dichotomy was Sibelius' topic. How we deal with pre-rendering and deferring of the render, the current proposes to solve these issues with with time slicing and Suspense.

Slides

React in the trenches: Mistakes made and lessons learned
Maria Clara
@Picter
Maceió, AL

How to structure your project, Maria Clara shared a bit about her experience to talk about the decisions she makes in a React Project. Folder structure, state management, styling, and tests. Maria cited an interesting fact about CSS in JS, this idea exists since 1996 and was introduced by Netscape as JSS.

Slides

How to scale your React projects with Monorepo
Nicholas Eduardo
@Doolie
Florianópolis, SC

Nicholas started by explaining ways to structure your projects. How we can have Monolithic, Micro-services, and Monorepo. After explaining each one he deep dived into Monorepos and how we manage these with Lerna.

Slides

Animations with React Native
Guilherme Jabur
@Foton
Florianópolis, SC

Jabur talked about animations in React native. He mentioned the different ways we can animate UI like with Animated API, Animatable library, and Lottie.

Slides

My own set of rules to live a long life with state containers
Matheus Marsiglio
@mtmr0x
São Paulo, SP

How to have guarantees of your data model, this way we can consume the state data safely. Always strive to have agnostic state, so we can change state management if necessary. Take advantage of JavaScript's flexibility. Between other points made Matheus also explained a state management library which he is working on called Nucleo, this library follows his set of rules.

Slides

To finish we had an open panel between participants and talkers.

Open Panel

The event was delightful we were able to do networking and exchange experiences. I'm grateful for G2i for sponsoring my trip to React Conf Brazil. For those whom are unfamiliar, G2i is a hiring platform run by engineers that matches companies with pre-vetted React, React Native, GraphQL, and native iOS/Android focused engineers you can trust. Check them out!

Reach out to me 😃

https://github.com/AndreiCalazans
https://twitter.com/Andrei_Calazans

--

--