ReactJS Day - Verona

Verona, Italy.

Last Friday we travelled to the beautiful city of Verona for the second ReactJS day organised by GrUSP, in partnership with FEVR. The group organises many conferences in the area, one of the most popular being JSDay. With the rising popularity and growing community of React, the group now also organises ReactJS day.

Michele, one of our frontend developers, is originally from Italy (near Verona) and is a member of WEBdeBS, a group from Brescia. It was great to have locals around to show us where the best food is, although you can’t exactly go wrong in Italy 🍕.

Pizza.

The day consisted of a single track with speakers from across Europe. This year, there was also “Unconference” talks (aka Lightning talks) during lunch. You can explore the programme here.

It is worth mentioning how friendly and welcoming the Italian JS community was. The conference is slightly smaller compared to other conferences which gave it a great atmosphere. The organisers did an amazing job.

Individual paint for your React components - Johannes Stein - (video)

The day kicked off with the eye of the tiger soundtrack introducing Johannes, who talked about applying CSS themes to React. As React has grown in popularity, so has writing CSS inside JS. There are, however, many, many approaches. Johannes pointed out that inline styles have become very popular, especially within React Native, however, they are not always ideal when dealing with components and themes.

Johannes showed us how using higher-order components (HoC) to wrap components and pass values through the context solves part of the problem. react-with-styles is a library from Airbnb which uses this approach. Johannes dislikes inline styles and recommends react-css-themr which takes a similar approach but combines it with CSS Modules. At YPlan we use our own “Atomic CSS Modules".

CSS is dead, long live CSS (but in modules, please)! - Kevin Mees - (video)

The second talk of the morning was also about CSS 😀. Kevin highlighted the disadvantages of CSS in JS including bad tooling support for writing inline CSS, awkward camel-case CSS classes, advanced CSS features not being supported and the lack of style reuse. Kevin described how the solution we found for globals in JS (using modules) is now being applied to CSS today. CSS Modules has become very popular, with react-css-modules being a popular library to help integrate it.

Kevin Mees.

How to push a ReactJS application in production and sleep better - Emanuele Rampichini - (video)

Emanuele spoke about how Single Page Apps, contrary to popular belief, are very complex and how the PnP (Push 'n Pray) approach to deployment is the standard for some! Testing and monitoring is important. He highlighted that monitoring tools such as Sentry, New Relic and TrackJS are vital for being alerted about any problems. Emanuele's talk also covered testing JS applications including how to test Redux specific functions such as reducers and thunks (using redux-mock-store). For end-to-end testing React applications, Emanuele has been using Protractor (an AngularJS tool).

One tip Emanuale gave to encourage those who are not use to a test-driven environment is to write out just the test definitions, leaving the implementation detail for later before the code goes into production.

At YPlan we use both Sentry and New Relic for monitoring and have a huge collection of test suites which are run automatically for every diff and on every deploy. We use a wide variety of tools and frameworks to ensure every deploy is trouble free.

Reactive Reality - Massimiliano Mantione - (video)

A break from talks about day-to-day web applications, the next talk was about VR. Massimiliano works with Virtual Reality, creating virtual showrooms for businesses. He explained how with the Web, the UI usually means the DOM, along with some framework. Similarly, with VR, the UI usually means WebGL, along with another framework. Massimiliano has a dream where developers can build 3D UIs, inside VR, using the same technologies and tools we already know and use today. DOM over WebGL would be the ideal solution, but we don't have that (yet). Using 3D CSS transforms over the canvas doesn't work with stereo rendering and SVG's inside the canvas require you to send over strings and CORS gets in the way when you want to render content from outside the origin.

Massimiliano's solution was to implement a renderer to render the UI on a 2D canvas, which can then be rendered as a texture on a 3D canvas. Massimiliano picked his poison wisely and started connecting css-layout (a pure JS CSS implementation) with konva.js (a 2D canvas framework which supports React). He found it cumbersome, as css-layout is not enough for emulating the entire DOM and doesn't always do what you expect. He also came across other problems with Konva, such as the lack of support for keyboard bindings.

Massimiliano persisted and after battling further issues with Babylon.js, produced a working implementation which he demonstrated. The day before his talk, React VR was announced. We look forward to the exciting possibilities of developing VR applications with JS frameworks and tooling.

Unconference

Unconference schedule.

The unconference included talks about 3D rendering, React Native, reusable React components and the upcoming React Router v4! It was interesting to hear about how React Native has influenced it's parent, pushing forward concepts such as inline styles. Fabio predicted that we will see other concepts such as explicit sizeable elements appear more frequently in web applications. react-native-web :), is an interesting project bringing React Native building blocks to the web.

Matteo's talk about Frontend Ops was great! He talked about how we abstract our automations and have maybe lost control of the tools that we use every day to build things. He showed us how, with his projects, he has started to move automation logic into a medium which he controls (standard JS files), where he can write tests for the various scripts. Matteo also pointed out the need to think outside of the system, supporting less-used environments such as Windows. His company has also created the habit of having 1 developer spend 1 hour a week on the maintenance of packages. We think this is a great idea! At YPlan we dedicate a day each week on #frontend #devops, rotating between the three of us. This consists of upgrading packages, refactoring our code, and trying out new tools.

Stay (React)ive with MobX - Francesco Strazzullo - (video)

Francesco talked about MobX, a library that "makes state management simple and scalable by transparently applying functional reactive programming". Being reactive is about being responsive, reliable, elastic and message driven. Franceso showed us that with MobX you add observables which react to the change of the state. Actions change the state, computed values are updated when the state changes and finally reactions produces side effects.

At YPlan we have recently been using MobX to create rapid prototypes. We think it is great for this purpose but we are continuing to use Redux for production code. As Francesco explained, MobX has less boilerplate than Redux, but the way it changes getters and setters may cause unexpected problems. At the end of his talk, Francesco summarised about how constraints can be a good thing, and how they can be added overtime with an evolutionary design.

Building Modular Redux Applications - Gian Marco Toso - (video)

Gian Marco's (first ever) talk was all about Redux. He talked about code reusability, separation of concern, and rules for structuring Redux applications. One set of rules are described in Ducks: Redux Reducer Bundles where modules must export functions and action types. Jack Hsu provides an alternative view about how Redux applications should be structured here. Jack's view is that modules should represent a feature, where there are no strict boundaries between modules but circular dependencies should not exist.

During the talk, Gian Marco defined his own view of what a module should be. He demonstrated how he uses Presentation Modules, Data Source Modules and a Data Provider layer to connect them. Gian Marco summarised his talk, mentioning the importance of structure and being able to know where to look to find specific code. He has shared his boilerplate here.

Gian Marco Toso.

Frontend At Scale: Experiences Using React In A Large Organization - Erik Wendel - (video)

Erik's talk was all about how his company manages React components inside a large organistaion. He described how they use to have a single private npm package called common-ui but now have an npm package for each and every component. This allows for component versioning.

Erik discussed the advantages of organising components in this way, including being able to add designers to pull requests when specific components change, as visible on a diff test. This opens up a whole new interaction between designers and developers.

At YPlan, for new projects, we organise our components in a similar way and have a design guide anyone can browse. react-storybook is a good tool to create something similar. We are, however, unsure about having an npm package for every component as versioned components add another dimension of code. We would rather keep all components up to date or create new presentational components if designs change drastically.

What the hell is graphQL and why should I care? - Fatos Hoti - (video)

Fatos's talk introduced GraphQL. If you haven't come across GraphQL before, it is a specification for a query language, providing a complete and understandable description of the data you wish to expose with an API. The query language is client focused, allowing the client to build queries to fetch multiple resources in one go and only fetch the data it requires. Fatos described how strong typing ensures queries are syntactically correct before execution and also allows for the creation of powerful developer tools.

Fatos has been experimenting with implementing GraphQL as an aggregation layer on top of an existing set of APIs. We found this interesting and discussed with him further afterwards, especially about how he handles cache invalidation. Fatos has been replacing an existing API aggregation layer and has found that GraphQL works well, however, it's probably not the best approach in all cases.

Near the end of his talk, Fatos discussed more advanced features of GraphQL such as defer, stream (batching) and live (real time) queries. He also recommended a stripped down GraphQL client called lokka if you are looking to get started.

At YPlan we have a side project looking into using GraphQL for our partner portal and Cinema Club products. It looks very promising and we are hoping to start using it in production soon!

Proper Error Handling with React/Redux - Michele Bertoli - (video)

The final talk of the day was given by one of our own, Michele, who talked about error handling in Redux. A great quote we found on the trusty W3Schools website was "Normally, errors will happen, every time you try to write some new JavaScript code". Michele will be publishing a blog post soon!

The YPlan frontend team. The frontend team and two other speakers

Overall, we loved the talks and enjoyed seeing what people have been working on, sharing newly found knowledge and code throughout the process. The highlight of conferences are not usually the talks, but meeting others. It's the conversations you have during the coffee breaks and over lunch that make you want to return. It was great to meet many developers who share the same passions and willingness to move the web forward.