DEV Community: Franck Abgrall

🛠✨ Demystifying SSR, CSR, universal and static rendering with animations

Franck Abgrall — Wed, 04 Mar 2020 12:59:49 +0000

📖 Parts
1) Server Side Rendering
2) Client Side Rendering
3) Universal Rendering
4) Static Rendering
5) Comparisons

Sometimes it might be hard to understand the differences between the different web rendering solutions. If you're a web developer, you've probably heard these words:

Server Side Rendering (SSR)
Client Side Rendering (CSR)
Universal Rendering (sometimes simplified to "SSR")
Static Rendering (or JAMStack depending on the tool you're using)

Here are 4 videos explaining in a simplified manner the process of each solution from a user's perspective. Know that the user scenario is the exact same in the 4 videos.

In the last section you'll find a comparison listing benefits and drawbacks of each solution.

Server Side Rendering (SSR)

⚠️ Note: Here I'm talking about full server side rendered websites (you know, old SSR websites 😉). This architecture was widely used before Single Page Apps were introduced.

Client Side Rendering (CSR)

Frameworks using CSR: Vue, React, Angular

Universal Rendering

Frameworks using Universal Rendering: Nuxt.js, Next.js, Angular Universal

Static Rendering

Frameworks/Tools using Static Rendering: Gatsby, VuePress, Gridsome, Next.js, Hugo, Jekyll

Comparisons

	Server Side Rendering	Client Side Rendering	Universal Rendering	Static Rendering
SEO	👍	👎	👍	👍
Fast initial load to show the full content of the page	⚡️⚡️	⚡️	⚡️⚡️	⚡️⚡️⚡️
Full page reload when navigating	yes	no	no	it depends on the tool you're using
Requires server hosting	yes	no	yes	no
Fluid seamless user experience on page navigation	👎	👍	👍	👍
Integrates well with websites based on frequent/real-time updates	👍	👍	👍	😕

Feel free to contact me on twitter if you have questions!

🐦 Twitter	💻 GitHub

Vue3 composition API: a list of good resources

Franck Abgrall — Mon, 04 Nov 2019 17:12:57 +0000

Vue3 is coming soon! And one of the most exciting feature of this new version is the composition API 🙌

I created an open source list of cool resources you should check if you want to learn about it:

👉 Awesome Vue Composition API 👈

Hope it will help, feel free to contribute to improve the list 🙏

📄 Cheat sheet - How to promote your open-source project?

Franck Abgrall — Wed, 04 Sep 2019 16:51:40 +0000

You've created an open-source project? Great. But what happens when your project is mature enough to be used? You've put a lot of effort building an awesome project that could help the open-source community, but the reality is that if you don't spread the word about it, almost no one will see or use it.

Some colleagues and I went through a lot of open-source projects promotion these last months, and we found some good practices that helped our open-source projects gain popularity. And guess what? We created a cheat sheet to summarize everything we learned 😎.

👉 Click here to check out the cheat sheet on Github 👈

Is this article a way to promote this Github cheat sheet? Yes. See, you learn fast 😜.

Want to get started with open-source?

If you're new to the open-source world, I strongly recommend you to read these two articles first:

Show your support

Do not hesitate to support us if this helped you:

Generate beautiful README in 10 seconds

Franck Abgrall — Thu, 13 Jun 2019 20:00:01 +0000

Hi 👋

A well structured and beautiful README is very important, especially for opensource projects. This is the first thing that visitors will see when they discover your project.

This is why I created readme-md-generator, a tool that generates beautiful basic README.md files with less efforts !

All you need to do is answer a few questions, and readme-md-generator will do the rest 👌

readme-md-generator is able to read your environment (package.json, git config...) to suggest you default answers during the README.md creation process :

Generated README.md :

Feel free to check out the github repos if you're interested !

Bento-starter v1.0.0 is out ✨ (#PWA, #boilerplate, #vue.js, #firebase)

Franck Abgrall — Tue, 11 Jun 2019 07:03:34 +0000

🍱 bento-starter is an Open-Source Full-Stack boilerplate solution that helps you to build fast and maintainable web applications using tools like Vue.js, Firebase, Progressive Web Apps support, dynamic offline support... The goal of this project is to provide a powerful and well configured stack (with CI/CD, hosting...) so you can focus on writing your web application very quickly. 

If you want more information about the bento-starter stack, please refer to this article : https://dev.to/kefranabg/a-productive-stack-for-pwa-development-27o

Some news about the v1.0.0 : 

✨ Update service worker workflow has been improved
✨ A setup command has been added to make install step easier
✨ A bento-starter slack has been created : join here
🐛 3 bug fixes
Full changelog is available here

Links :

Github: https://github.com/kefranabg/bento-starter
Documentation: https://bento-starter.netlify.com/ 
Demo : https://bento-starter.firebaseapp.com

A productive stack for PWA development

Franck Abgrall — Thu, 25 Apr 2019 18:42:53 +0000

“Write once, use everywhere”. I love this philosophy and I think this is the dream of every web developer: build an application that would be fully supported by all platforms (mobile, browser, desktop), without installation steps. This is a complex idea that Progressive Web Apps are trying to solve.

In this article, I will talk about a complete full-stack environment that helps me to kick off my PWA projects very quickly.

Before starting, I would like to share this github repository. This open-source project is a starter template that perfectly illustrates the points I will raise subsequently. So, if you need a concrete integration example, feel free to take a look. This stack is very opinionated, but it’s also what makes it powerful.

Here are my needs:

"I want a complete full-stack environment that helps me to focus on my developing skills to build Progressive Web Apps very quickly without compromising the best practices."

Let’s do it step by step!

Database + REST API

I will be very brief. We don’t want any database or REST API. Let me be more specific: We don’t want to manage them on our own. Why? Because it’s hard to host them and it’s more code to maintain. Nor do we want to deal with problematics like scaling etc. Keep in mind that what we want is to be fast during development!

Firestore from firebase seems to be a pretty good option! Thanks to a client API, we will be able to read and write data from a cloud NoSQL database and firestore security rules will help us to provide access control and data validation. In addition, Firestore offers an offline support for data persistence which is really interesting for PWAs. Firestore is also a realtime database. It means that I can listen to specific part of my data structure and get realtime updates on my application.

What if you need to run code in a secure context (not on client side)? For example trigger business logic when a client do a CRUD operation?

To deal with these specific cases, we can use firebase cloud functions.

Cool! We’re done with a huge part of our stack, and be sure that we’ve just eliminated a huge amount of code. That’s what we want!

User authentication

You really should use a third party (email, phone, social) to authenticate your user. It’s less code for developers to write, and it’s simpler for our users to authenticate.

Once again, we can use firebase to save some development time. Firebase authentication provides a lot of methods to handle authentication:

Social networks sign-in (Google, Facebook, Twitter, Github …)
Phone authentication
Email with authentication link
Classic email/password

Frontend

💚 Javascript framework:

Why choose Vue.js? Because I really like the philosophy of this framework and I am very productive using it. It’s simple, provides a great developer experience, and it’s probably the easiest javascript framework to learn today.

In my opinion, there is no “best javascript framework”. The most important is to use the one you like to work with.

💅 UI component framework / CSS:

In a PWA context, I would recommend to write your own CSS and UI components. I think it’s hard to find a good lightweight UI component framework and our PWA needs to load fast. So if you decides to use a framework, be careful on how it will impact your application size.

🔁 Frontend state management:

Vuex is the default state manager of Vue.js and it’s really simple to use. It comes with vue-devtools which is an amazing browser extension to debug your application, trace events, and have a global view of what your data structure looks like in your app.

✅ Tests frameworks:

I personally like to use Cypress (Chrome only) for e2e tests and Jest for unit tests, but the most important is to use tests frameworks you like to work with.

👨‍✈️ Frontend quality tools:

One of our prerequisite is to produce quality code because a PWA must be fast and lightweight. Here are the tools we can use:

BundleSize: Code splitting is something you should care about. This is the easiest way to increase your website performances. Your PWA needs to be fast on initial load, even with a bad network connection. This is why your app should be splitted into several javascript bundles. BundleSize helps to keep a permanent control over the different bundle sizes that compose your application.
Lighthouse (browser extension / chrome devtools): A great audit tool that generates reports for your web app pages. A lighthouse report will rate your web pages on several topics (performance, accessibility, best practices and progressive web app). These reports will also give you advises to improve the negative points you might obtain.
Code Coverage (chrome devtools): This tool will display how much code was executed vs. how much was loaded on a web page. This will help you to see which part of your code you could lazyload, and ship only the code a user needs.
Prettier: Code format is something really important in my opinion. I don’t mind using semi-colon or not. The only thing that is important to me is having the code uniform so anyone can read it the same way. Wether you like it or not, Prettier will format the code its way, and that’s what is great about Prettier.
Eslint: Use as many linter rules as you can (within reasonable limits), this will structure your code and helps you to go over best practices. If you don’t want to write your own set of rules, I suggest to use existing eslint configurations. I love the airbnb one because it’s very strict and complete.

PWA support

If you’re not familiar with PWA, I suggest you to read this.

In this part I am not going to talk about how service workers works, or how to create a web app manifest. There is already great articles and documentation about it, so I’ll focus on tools you can use for a good start and give you some advices based on my experience.

PWACompat:

This library brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps. It also comes with some other cool features like creating dynamic splash screen images for IOS (not supported by default on IOS yet).

vue-cli-plugin-pwa:

This plugin will help you to configure your PWA with Workbox, which is today the best way to handle service workers. By default, your service worker file is generated from a basic JSON configuration (you have access to) for more simplicity. But if you want more control over your service worker configuration, you’ll have to write a service worker file yourself (refer to the official documentation for more details).
Vue-cli-plugin-pwa comes with the library register-service-worker that simplify service worker registration and exposes hooks for common service worker events like “updateFound” (when new content is available), “registered” (when service worker has been registered) etc.

Offline:

A PWA is not a good PWA if it cannot works properly without network connection. A clean offline management requires two things:

Static files caching: This is a required step if you want your application to just start without network connection. Hopefully you won’t have anything to configure if you’re using vue-cli-plugin-pwa. Otherwise you’ll have some workbox configuration to do.
Dynamic caching: The easiest way would be to show an offline page, to tell the user he cannot access data without network connection, but we can do better. What we want is that the user can access data he already fetched before. If your data is coming from a firestore database, you can just enable offline persistence and firestore will take care of the rest. Otherwise you’ll have to cache requests responses with workbox.
Now we’re done with the basic configuration!

But remember that you can still improve your PWA user experience. Here is some examples of improvements you could add:

Encouraging your IOS users to install your PWA:
IOS does not automatically prompt user for web app installation as Chrome would do on Android devices. But you can easily overcome this shortcoming by displaying a modal prompt with clear and easy steps to install the app. Here is a great article about this.
Display a “new version is available” for your PWA:
Have you ever been on a website and noticed a popup notification which informs you that there is a new version of the site available? This is exactly what I’m talking about. Thanks to this popup, the user will understand that he is not on the last version of your app, so he needs to reload to get the last one.

Prerendering

In many cases, Server Side Rendering is overkill. What I like about pre-rendering is that it won’t affect the way I’m writing my front-end app code or the architecture of my project, while getting almost all advantages of SSR. If you don’t know what pre-rendering is or when you should (not) use it, I suggest you to read this.

To pre-render our app pages, we can use prerender-spa-plugin. In short, this plugin fire up a headless browser, load your app’s routes and save the result to static HTML files. It means that all of my application will remain static, so we could easily host it.

Hosting

Now we need to host our static website, and I think that you start to understand that I do like firebase 😉.

Firebase hosting will help us to quickly deploy our PWA to a CDN that will serve our content over a secure connection (HTTPS is required to use service workers in production).

Continuous integration/delivery

Cool! We’re almost done. But we are lazy, and there is some parts that we can automate.

CircleCI is a great platform that will help us to run our tests, check code with our quality tools and deploy to firebase hosting when we push code to the remote repository. Here is the workflow we want:

Install our project dependencies.
When install dependencies step is complete, we will parallelize the following
jobs: run e2e tests, run units tests, run linter and check our code format with prettier.
If all of the previous jobs ended with success, we will build our app (with pre-rendering).
Once the build step has ended, we will check our javascript bundles sizes with BundleSize.
Finally, if the targeted branch is the release one, we will deploy to firebase hosting.

Here is the CircleCI configuration file that corresponds to the above workflow.

Conclusion

With this full-stack solution, the only thing we need to care about is writing our PWA code, and this is exactly what we were looking for. To summarize:

Firebase platform saves us A LOT of time, and takes care of the PWA hosting.
Frontend quality tools help us to keep our code clean, fast and performant. Remember that it’s really important in a PWA context.
A good CI/CD configuration allows to keep a permanent control over the code quality and spare time for app deployments.
Consider using pre-rendering over SSR, because it’s easier to implement.

As already mentioned, checkout this github repository if you’re interested in building a PWA and don’t know where to start, or if you just want a concrete example of the stack I presented in this article.

Feel free to contact me on twitter if you have questions!

A full-stack solution for fast PWA development !

Franck Abgrall — Wed, 24 Apr 2019 12:07:02 +0000

Hi 👋,

If you’re interested in building Progressive Web Apps, I would like to share an open source project we've been working on for few months : bento-starter

🍱bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications using tools like Vue.js, Firebase, Progressive Web Apps support, dynamic offline support...

The goal of this project is to provide a powerful and well configured stack (with CI/CD, hosting...) so you can focus on writing your web application very quickly.

As this project is a template project and not a CLI, you have access to the entire app configuration so you can change it according to your needs.

If you interested, fell free to take a look !

👉 Github https://github.com/kefranabg/bento-starter
 👉 Doc https://bento-starter.netlify.com/

Please tweet me if you have questions ! @FranckAbgrall

Hope it will help !