Just heading back to base from Berlin where I attended amazing 
React Day Berlin 2018. It was the first big conference that  I have attended in Germany and here are my key takeaways.

React Day Berlin 2018 Facts

800 React fans came to Berlin for in-depth talks and hands-on workshops by 24+ speakers on all things puzzling React developers minds, be it architecture, Design Systems or styling in React.

React Day Berlin started with Ken Wheeler discussing about his favourite new features coming to React – “The New Hotness: An Exploration of Reacts Exciting New Features”

React Hooks solve a wide variety of seemingly unconnected problems, in particular:

  • It’s hard to reuse stateful logic between components
  • Complex components become hard to understand

“Only call hooks at the top level”

  • useState
  • useEffect
  • useRef
  • useContext

I have to say that his demo was impressive!  Ken showed us Hooks in actions using a music mixer as a real-world application example. Super entertaining:

https://twitter.com/panay_georgiou/status/1068429361454424064

Next on stage was  Forbes Lindsay who presented “Powering Code Reuse with Context and Render Props“. He presented how combining the context API and render props gives you unprecedented power to cleanly reuse code across components.

Forbes Lindsay 4 takeaways:

  • Functions being first-class values means we can use them as parameters to enable more flexible code re-use
  • Using functions as parameters allows highly customizable shared components, complete with state and lifecycle hooks.
  • React Context lets you share state across the tree of your applications
  • Context still uses the React tree. This means it works with server-side rendering and you can safely use it in parts of your app, as well as using it as a whole app solution.

How to organise your React application architecture?

Oleg Isonen come with insights from webflow on building complex applications. He presented goals and set of principles that help you to define the boundaries of feature-driven architecture.

Set of Principles takeaways:

  1. Decentralization
  2. Explicit Sharing
  3. Co-location
  4. Decoupling & isolation
  5. Disposability

After the coffee break Monica Lent  presented on stage the “Secrets to a Successful Design System”.

Before you build a design system, you do design audit. The result can be detected a lot of inconsistency in design. But the worst thing is that designers and developers have most likely have wasted a lot of time by trying to optimize all those inconsistencies.

Secret #1 is Design systems are about productivity

Secret #2 The world is bigger than React

Secret #3 A design system is a dependency

Secret #4 Collaboration is key to long-term quality

Secret #5 Design systems are about people

People success is the system’s success. Key KPIs for design system are Speed, Quality, Ease of Contribution and Completeness.

Organize in a way that scales.

“The real cost of software is not the initial development, but maintenance over time”

Next on stage was Jack Franklin in Tip Top Testing in JavaScript presented generic tips on how to write good tests.

You should be able to look at a single it test and know everything

Jack started with giving generic tips on tests structure and here is a takeaway template:

it(‘clearly says what is being tested’, () => {
  // 1. Setup
  // 2. Invoke the code under test
  // 3. Assert on the results of step 2.
})

“Navigating the Hype-Driven Frontend Development World Without Going Insane” presented by Kitze

“Don’t get yourself to the Fear Of Missing Out. It’s just a side-effect of wrong priorities.”

Sara Vieira talked about different approaches to styling. She presented “The Lonely and Dark Road to Styling in React” , she mentioned the pros and cons of each of ways

React Day Berlin 2018 Summary

Overall React Day Berlin 2018 was awesome with lot’s of takeaways.. keep an eye on my blog with the videos coming up next…