Universal Javascript in React - workshop

Last Thursday, as a part of Case Week in Poznań, we conducted a 3-hour workshop on using Universal JavaScript in React. We were overseeing the work of IT students whose task was to write an SPA (single-page application) using React and Transmit.

‍

Problem: Why aren’t things perfect now?

There are three major issues with the use of JavaScript these days.To begin with, search engines still lack in support for JS-built web applications and so, e.g., Apptension’s website is virtually invisible to Bing, Baidu, Yandex, and Yahoo. And mind you, we got noticed by the CSS Design Awards jury.Also, the relative loading time for JS-powered websites is still fairly long.Finally, there’s the problem of FOUC - flash of unstyled content - with a web page being briefly displayed with the browser’s default styles before loading an external CSS stylesheet.All this means that, paradoxically, the more complex a website is and the more features it hosts, the less appealing it might seem to its users, at least at a cursory glance - and sometimes that’s all it takes for a potential client to lose interest in your offer.

‍

Solution: Universal JavaScript in React

In Universal JavaScript, also known as “Isomorphic JavaScript”, pages are rendered first on the server, and then the client side picks up on using SPAs from where the server side has left it.This means that SPAs can be rendered on the server in NodeJS and the client doesn’t need to render React components once again. At the same time, both the server and client side can consume any external APIs.Writing SPAs using React and Transmit, and rendering it on the backend with NodeJS not only speeds up the loading process but also allows for the web page to be automatically indexed even by those “resistant” search engines.

‍

Workshop: Let’s put it to the test!

During our CaseWeek workshop, students were to write an SPA using React and render these apps via NodeJS server.They also connected it to the Marvel API: first on the client side and then, finally, on the server side using Transmit.Sounds interesting? Sure it was!If you’re looking for details, here’s a slideshow we presented to our participants (in Polish):

‍

Universal Javascript in React from Apptension

However, our workshop was about more than just SPAs (although that was the vital part of it).As a wrap-up, we had a chitchat about the current state of affairs in the IT industry.It was great to share some insider info with the participants - and to hear some comments from their point of view, too!