Win a copy of Node.js Design Patterns: Design and implement production-grade Node.js applications using proven patterns and techniques this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

Progressive enhancement in Angular 2?

 
Ranch Hand
Posts: 90
1
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Angular 2 samples that I have seen use a custom element filled with a simple loading message as the launch point for the app. For example, the Angular Router demo uses:



.. and the Angular 2 Material demo uses:



This is fine if the user has enabled JavaScript in their browser, but if they don't enable JavaScript or there is some network issue that prevents one of the critical scripts from loading, then all the user will see is the loading message. Also, while Angular is loading, the user only sees the loading message. They might think that the website is broken.

Is it possible to implement progressive enhancement techniques with Angular 2? Maybe the server can render markup to display some content and then Angular will come along and take over the content elements once it finishes loading?
 
Sheriff
Posts: 67592
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Giving you a cow for starting off this week's book promo with some really excellent questions.
 
Daniel Trebbien
Ranch Hand
Posts: 90
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you so much, Bear!
 
Author
Posts: 8
5
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If JavaScript is disabled in the browser there is not much you can do, probably server-side rendering is the only option. Server-side rendering is indeed supported by Angular, the sub-project is called Angular Universal. While it works already, I would wait till Angular 4 before staring using universal in my projects. There is an ongoing process of incorporating Angular Universal into Angular core, breaking API changes are expected, but the process should become better integrated into Angular API and Angular apps.

The idea is that you will have two entrypoints (i.e. two bootstrap modules) in your application - one for browser, another one - for server-side process. The server-side bootstrap module will override services that are browser-specific. For example, in browser version you may have a service that uses HTTP to fetch data, while the server version will fetch data directly from the database. When user requests your application from the server very first time, it will bootstrap your application on the server, and return generated static HTML page as the response. The page will include links to the application JS bundles. Once bundles are loaded and the browser version of you app is bootstrapped, the page becomes interactive.
 
We must storm this mad man's lab and destroy his villanous bomb! Are you with me tiny ad?
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
reply
    Bookmark Topic Watch Topic
  • New Topic