Everything you need to know to get started with universal apps.
80% Practice, some thinking/di
Universal web apps combine server-side rendering with single page application architecture, giving several benefits. Search engine bots are able to easily consume your site and users get fast perceived performance. In this session you will build your own universal web app. We will cover using React and Node to create the key components. We will also learn debugging tips and tricks. Finally, we will discuss common production app issues and strategies to effectively solve them. By the end of this session, you will have a working universal web app!
Specific topics/code that we will cover:
* How to make sure your data is available before serving a page from the server (since ReactJS doesn’t handle asynchronous data on the server)
* The different states that need to be accounted for:
** Server page load (i.e. search bots)
** Initial user load from the server with subsequent browser render
** Single Page Application experience
** Data mutation concerns and immutable data patterns in ReactJS (Redux, ImmutableJS, etc)
** How and when to handle differences in browser/server requirements (webpack)
Skills:
* JavaScript/HTML/CSS
* Previous experience or exposure to React is helpful but not required.
* Previous experience or exposure to Node.js is helpful but not required.
Jobs:
* Fullstack or frontend software engineer
* Learn a new type of web app architecture.
* Understand the complexity/tradeoffs involved with universal apps.
* Practice React/Node skills.
* Be able to better advocate for a universal architecture approach with your team.
* Starter application
* Guide with checkpoints for people to follow along.
This session assumes each participant has a laptop and can download the code example. Throughout the session, we will work on a single application.
* I will talk about a topic area and show some sample code.
* Each participant (or pairs if preferred) then implements the concept in their own app.
* This repeats throughout.
* 00:00 - 00:07 - introductions/topic overview, understand various skill levels in group
* 00:07 - 00:15 - Setup exercise - make sure everyone can run code.
* 00:15 - 00:30 - Create first server-rendered route
* 00:30 - 00:40 - Understanding loading of the site, debugging tools.
* 00:40 - 00:55 - Fetching data/serializing data to the browser.
* 00:55 - 1:05 - Enabling the single page app - the app works!
* 01:05 - 01:15 - Discussion on advanced topics.
In the feedback, someone noted that perhaps this session could use more time. If possible, another 15-30 minutes would allow us to cover more, however we can definitely hit on all of the most important bits in this time frame. I would provided a starter app so we can move more quickly.
* Web app (runs locally on participants computer)
I have previously given talks on this topic but this would be the first workshop version. I am also the author of a book on this topic.