My Untold History

life;startup;community;code;

College

I want this to be more like a rant instead of more formal historical events.

I did a study abroad in the United States from mid-2013 until mid-2014.

I come back to Brazil 2/3 weeks late for the semester. I also started doing a master's at the same time as finishing my undergraduate in Computer Science to make things more interesting.

I've made 4 hard courses in the master while still doing undergrad courses and graduation projects. I got a B (not so good grade) in one of the classes because I didn't attend all classes because I was in US \o/.

First Startup Job

My master professor advisor went to the US to do research, then I saw a job posting about Ninja Startup Job. The idea of this program was to do an internship in a startup in São Paulo or Minas Gerais (states in Brazil).

I did a remote interview with Pedro and Gustavo of PontoTel. I was living in my fraternity in São Carlos at the time. Both Pedro and Gustavo were good mentors to start my journey, and I'm thankful to them.

Even though I didn't know anything about backend or frontend, I've got the internship to work the full January of 2015 at São Paulo.

PontoTel

PontoTel provides a service that you register when an employee arrives and leaves the company like a check-in. Employees could check in using voice over a phone call (twilio/plivo API).

My first task was to build a voice-recognition system to detect if the employee voice was their own voice. I've built a model using a mixture of gaussian in 14 days using sklearn , then I've started exposing the system using flask as the API.

The first time I've heard about React was by Lucas Brigida, that was doing a summer internship with me at that time.

Angular 1 won that time because it was backed by Google, and React was to early (bleeding edge) and backed by Facebook that hasn't a good track of doing open source.

After the voice recognition system, I moved to work more on the backend of PontoTel, mostly python with flask and mongoengine (mongodb wasn't so powerful back them) in a REST api.

I did generate some xml to talk to twilio/plivo api to generate the "fake" voices. This was one of the first professional abstractions that I made.

A base class that "controlled" the basic dialog flow and specific classes for handling specific behavior for Twilio and Plivo. OO was "good".

I also made the first PontoTel app using Android, as I had some Android experience from college. I've rewritten the whole basic structure of the app in react-native in 1/2 days (more on this in below).

The hard part was a state machine to avoid users from tampering time to not begin late when checking in and out.

Another hard part was offline management, as the check-in should work offline and sync when the mobile phone or tablet when to the base with an internet connection. There was no CRDT or hard science about this offline, it was just based on a single last time synced and that's was it.

Plraphel and Lucas worked on the frontend angular app while I've learned about backend and other parts of the system, like async processing using celery.

I've started working on the frontend to build some simple parts, and then more complex ones.

Plraphel would develop everything using directive (aka components in angular v1). The problem was it was very hard to build a directive in the right way. Ng-model was hell to get it right with two-way data binding, you always get an infinite loop, worse then useEffect \o/.

We decided to keep using controllers and views instead, it was easy to hard to compose in the long run.

The project used grunt to "build it", it just inserted all angular code imports in a HTML file. It does feel dirty now, but it was the old web, nobody knew how to properly do it.

First React impressions

The second time I saw React was in a single file of an ionic project that my friend, that is a doctor, send me to review.

The weird part of this project for me was that everything was in a single huge file, jsx didn't catch my attention back then.

End of 2015, I decided to do a side project of a chat app with bot automation. I didn't know the UI of a chat was hard to get right. I didn't know UI (frontend) is not so easy as it sounds, and even harder in mobile apps.

I've tried many different approaches: Java and Kotlin for Android, Objective C, and Swift for iOS, ionic, and the last one was React Native.

I've struggled with all of them except React Native.

The DX of native development (android/ios) was really bad, it takes a lot of time to compile and retest your changes.

When comparing to native, the DX of React Native was awesome. Hot reload was fast in my small side project (fast refresh is much faster now).

To install a package or dependency it was much easier in React Native even though you had to manually link package sometimes. npm install <package> and you were all set.

I've found a package that did the basic chat ui and logic for me, and in 1/2 days a had a working version, after spending a month or two looking for the perfect language/framework.

React SP Community

After finding React Native to be awesome, I've decided to create a meetup about it here at São Paulo to find more people excited about it.

The first one was at Direct Talk on January 26th, 2016

Keuller (https://twitter.com/keullermag) did the first presentation about React (basic concepts). Henrique Sosa (https://github.com/henriquesosa) hosted the meetup.

They knew much more about React than I did back then.

#ReactSP43 - React Native Web & Micro-frontends

Leaving PontoTel

I could feel the energy of React community growing.

It was easy to code in React, in React Native, and in javascript in general (if you use modern language features using babel to transpile them).

PontoTel saw me as a bottleneck as I was always pushing new technology changes (react, redux, graphql, relay, react-native, webpack, es6, maybe more).

I've decided to leave PontoTel to work with React and another bleeding-edge tech to fulfill my full potential. My last task was trying to refactor the whole codebase to use es6 + webpack, instead of adding scripts tags in HTML.

Entria

I've joined Rafael Turk (https://twitter.com/rafaturk) to build Entria

Rafael had a lot of experience in banks, card machines, and he was the first employee of Amazon here in Brazil, and also helped expanded Amazon to Mexico and startup expansion to Australia.

The first time I met Rafael was in a Starbucks and he showed me Brand Lovers, and we started coding.

I've deleted a production database collections running a test script that day, I was glad we had a backup.

BrandLovers

BrandLovers was a social network to find the best beauty products using machine learning algorithms. It also worked as a marketplace where you could find the closest seller to sell you a lipstick. It was similar to Rappi but only for beauty products.

The first backend version was made in python as a REST API. The first frontend (web app) was made in flask.

We moved the backend to node using koa. We moved the web to use React and Redux. We used react-native on the app with Redux.

It was overwhelming to add more features because redux made it hard, and it didn't have any tests back them.

Plraphael made the first GraphQL implementation in the backend, all the types in a single file. I've refactored later on to move each type to its own file \o/.

He also made the first Relay implementation (relay classic).

Relay was awesome, it was easy to work with and add new features without breaking things. It was easy to refactor.

Natura

We noticed that it was hard to monetize BrandLovers, but it was useful to attract attention to the Natura company.

We made the salesforce app for Natura and started working on my projects.

We shipped a GraphQL server using Oracle/Postgresql and many API to production to be used by more than 1M Natura consultants.

We used to use React Native and Relay to power mobile and web apps for them.

Gol

We were the most known software house using React Native in Brazil.

Gol airlines tried to hire many React Native developers to create their new app, but there weren't many out there.

They decided to hire Entria to build their app instead.

It was a project of 4 months that turned into 1-year project.

It was a huge app. We used Flow that didn't work well for many of our developers (only for the ones with mac os x). We need to support many custom animations and navigation transitions, we patch react-navigation (it wasn't so good as now), to make this possible.

We used Redux, so everything was rerendering all the time \o/. We had to optimize each tiny rerender to make it fast in slow end devices

Feedback House

Feedback House is our own SaaS platform to manage people for business.

It is the state of the art of our innovation. You can have a glimpse of our internal codebase here entria/entria-fullstack

Right now we have 4 monorepos:

  • monorepo for backend for our 3 graphql servers, worker(bull) and external api

  • monorepo for frontend for our 3 frontends

  • monorepo for apps for our main app and on premise apps.

  • monorepo for lambda that handle data integration for customers.

And we have many more repos, like our landing pages with gatsby, documentation with docusaurus and even headless wordpress.

To Sum up
I've learned a lot and I still have a lot of things to learn.

I did a lot of good talks, and a few bad ones. I even did a talk and workshop about Relay to React Europe (https://github.com/sibelius/relay-workshop).

I made a lot of good and bad code and I did a lot of code reviews.

This is a compression of 5 years of my life, so it is missing many details, this is the low-resolution version of it.

Now

Right now, React Community Brazil slack has more than 9k users (give feedback about the community here https://forms.gle/BC633MsGQYcMXvCm9).

I made a lot of great and true friends at PontoTel, Entria, and all communities.

Thanks to everybody that was part of my journey, it is just beginning.

Next

I'm interested in improving my CSS and Design skills (Figma), here a boilerplate you can use to play https://github.com/sibelius/ui-boilerplate. Mostly to build some “simple” websites for my wife and sister for their own business.

I'm also excited about Recoil (https://recoiljs.org/), a new state management solution that cares about rerenders.

I keep most of my time sharing stuff on twitter and slack, aka learn in public.

If you liked this rant, share and send me a DM on twitter (https://twitter.com/sseraphini).

If you want to provide some feedback to me, you can here https://entria.feedback.house/sibelius