Summary of React Conf Brazil — 2018

Summary of React Conf Brazil — 2018

Brazil is home to React's largest conference in Latin America. Main takeaways from the 2018 edition.

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.

See 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.

See 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.

See 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.

See 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.

See 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.

See 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 ❤️.

See 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.

See 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.

See 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.

See 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.

See 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.

See 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.

See 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.

See 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.

See Slides >

Ending Panel

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

Image for post

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! 😃


Related Articles