JSFoo 2019

Annual conference of 800+ front-end, backend and fullstack engineers

Tickets Propose a session

Angular Universal - Be SEO, CDN & User friendly with Server-Side Rendering

Submitted by Maciej Treder (@maciejtreder) on Tuesday, 14 May 2019


Preview video

Section: Workshop Technical level: Intermediate

Abstract

Are you ready for production? Are you sure? Is your application prefetchable? Is it readable for search engine robots? Will it fit into Content Delivery Network? Do you want to make it even faster? Meet the Server-Side Rendering concept. Learn how to implement it in your application and gain knowledge about best practices, such as transfer state and route resolving strategies.

Outline

Most of the Single Page Applications, and Angular is not an exception here, manifest one common problem. They are not SEO/CDN/prefetching friendly. 

Some could ask “Why should I care about that? My application bootstraps in the browser and looks awesome”, and they are right, as long as they are well-known companies who don’t need to position themselves on the market, AND their applications are closed ecosystems. In any other case, SEO and prefetching is a “to be or not to be” of the application. 

Is there a way to move Angular rendering process to the server and deliver richer content to the browser instead of pure index.html with tones of JavaScript? Yes, there is! It is called Angular Universal, and thanks to it, we achieve much faster First Meaningful Paint of our website! However, there are some pitfalls and risks as well…

During this talk I will cover how to implement server-side rendering (an official angular guide; and an alternative way by using schematics from ng-toolkit project); and how to deal with the problem which developers encounter while working with SSR:

  • how to execute different code on NodeJS and inside the browser (different global objects available in both environments); with a real-life example: internationalization with ngx-translate (loading translations via HTTP and directly from the file system)
  • How to convey to the browser the information that the back-end already did external API calls and there is no need to repeat them.
  • How to abandon long-time calls to inefficient endpoints, and avoid delays in the server-side rendering process.

In closing, I will mention an alternative to SSR - prerendering, a process of rendering all subpages at the build time, and compare both techniques.

Speaker bio

Senior Software Development Engineer at Akamai Technologies.
Enthusiast of web technologies especially Single Page Apps, Progressive Web Apps, microservices, and Internet of Things. Author of articles about JavaScript, NodeJS, and Angular. Open Source contributor - creator of @ng-toolkit opensource project - set of tools for expanding existing Angular applications.

Slides

https://drive.google.com/open?id=1vJsUH-k08RAOCufWZCFvU3zw4wr_2m9i

Preview video

https://www.youtube.com/watch?v=J42mqpVsg0k

Comments

  • Abhishek Balaji (@booleanbalaji) Reviewer 3 months ago

    Hi Maciej,

    Thank you for submitting a proposal. We need to see detailed slides and a preview video to evaluate your proposal. Your slides must cover the following:

    • Problem statement/context, which the audience can relate to and understand. The problem statement has to be a problem (based on this context) that can be generalized for all.
    • What were the tools/frameworks available in the market to solve this problem? How did you evaluate these, and what metrics did you use for the evaluation? Why did you pick the option that you did?
    • Explain how the situation was before the solution you picked/built and how it changed after implementing the solution you picked and built? Show before-after scenario comparisons & metrics.
    • What compromises/trade-offs did you have to make in this process?
    • What is the one takeaway that you want participants to go back with at the end of this talk? What is it that participants should learn/be cautious about when solving similar problems?

    We need your updated slides and preview video by 28 May to evaluate your proposal. If we do not receive an update, we’d be moving your proposal for evaluation under a future event.

  • Abhishek Balaji (@booleanbalaji) Reviewer 3 months ago (edited 3 months ago)

    Maciej, you’ve added this proposal as a workshop, but the desciption is structured as a talk and there’s another submission under the same title (https://hasgeek.com/jsfoo/2019/proposals/angular-universal-be-seo-cdn-user-friendly-with-se-knPdKhwVGbCVdp36fuwfLV). Could you please clarify how you want to proceed?

  • Maciej Treder (@maciejtreder) Proposer 3 months ago

    Hello Abhishek,

    That would be an update version of similar talk given in Kiev (added video to the proposal). Regarding your question about workshop vs presentation - this topic, is just a good candidate for as well present it as make a deep-dive workshop.

    • Abhishek Balaji (@booleanbalaji) Reviewer 2 months ago

      Thanks, moving this to evaluation.

Login with Twitter or Google to leave a comment