How React shaped Haptik’s frontend story

At Haptik, we use React extensively. In fact, 5 out of our 5 heavy lifting customer facing Apps are written in React.

But this was not the case always, we had to try a whole lot different technologies to fail and then move to React 2.5 years back only to succeed. React has, in fact, made our frontend journey very simple.

This talk will revolve around how React has helped a startup to build and ship great bug-free and good looking products. How React eased our process to get started, our learnings to build extensible products and things we did wrong (and learned from).

We wish to give back to the same React community who has helped us grow extensively in our journey.

Transcript

1. How React shaped Haptik’s frontend story
2. Hello! I am Nabendu Karmakar An engineer @haptik
3. A Chat Application
4. What we needed to do ⊙ Separate frontend and backend ⊙ Make different teams able to work in parallel ⊙ Make it look great Started with HTML, CSS and jQuery.
5. What we observed ⊙ Started off very quickly and easily ⊙ Started delivering product features ⊙ Started writing lots of code Our life felt simple.
6. System getting slow and sluggish Started encountering problems
7. “ Ah! Can’t change that piece of code as it may break other things.
8. To find the state of the system, we were querying the DOM every time The causes There were multiple sources of truth for most of the app state Multiple event listeners
9. <label class="switch"> <input type="checkbox" checked> <span class="slider">ON</span> </label>
10. BIG REALISATION
11. What we needed at Haptik? ⊙ State based framework ⊙ Predictable and production-grade ⊙ Fast and lightweight ⊙ Can build great UIs ⊙ Easy learning curve
12. Too many choices? ⊙ Angular ⊙ Ember ⊙ Backbone ⊙ ExtJS ⊙ Knockout ⊙ React
13. Why React?
14. State based architecture The Data Flow The APIs
15. Our process was easy POCs first Stateless Components Port small parts
16. Our learnings Lint & Guidelines Smallest Components JSX Flat states Pure Components Vanilla Flux
17. Our very own starter kit
18. ⊙ Our best practices, libraries & stack ⊙ Defined app structure ⊙ Proven lints ⊙ Build process
19. “ Keep it simple...
20. ⊙ Don’t use it if you don’t need it ⊙ Chose extensibility over ease of building ⊙ If you can do it, do not lend it
21. “ Frontend is the future
22. “ React is the fast-forward to it...
23. Thanks! hello@nabendukarmakar.com