技术控

    今日:6| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Analysing the Angular 2 Universal Starter Kit

[复制链接]
夏日落傷 发表于 2016-10-10 00:37:10
193 6

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Hi folks,
   Today we are going to dive into the Angular 2 Universal Starter Kit . If you have never heard about it it’s ok, your boss is not going to fire you tomorrow because of that (not yet). There are other Angular 2 Universal seed projects in the wild but this one is complete and very simple to start with, furthermore it’s been created by the Angular Class team, which is composed of some Angular official contributors and they have great humor (ex: this post’s thumbnail).
   What is Angular Universal ?

   Single-Page Applications (SPA) are great, they offer better performance and better User Experience, however they come with a price.
  
       
  • Google bots are not great at indexing SPA apps (they are improving though) and you will have a hard time optimising your SEO there.   
  • It takes a lot of time to initially load the beast.  
   Angular Universal solves those issues by allowing server-side rendering (SSR) !
   I wouldn’t do a better job then them describing their technology’s workflow so head there to see how the magic works.
  Now let’s get our hands dirty!
   Architecture

  The architecture can be a little bit complicated at the beginning but just like the bicycle, once you get it, it’s easy.
   Basically it’s a separation between client-side ( app.browser.module.ts ) and server-side (  app.node.module.ts  ).
     In the application, those two files look the same at the beginning but as the app evolves, they will diverge.
In   app.browser.module.ts   , you can only import client-side modules like the Angular 2 Bootstrap module for example whereas in
    app.node.module.ts
   you can only import server-side modules.
     The only difference with  app.browser.module.ts  will be:
   Universal Module will be composed of different modules that only work in the browser.  If you create a new Angular 2 component, don’t forget to add it to the app.browser.module.ts!  
  The keystone of the Angular 2 Universal application is the server.ts file:
  Quite a big file isn’t it?
  Let’s focus on what is new here.
   Angular Universal

  Let’s start by enabling the production mode. In this mode only one cycle of change detection is done. So your app is basically two times faster.
  We then use the angular2-express-engine in order to render our Angular 2 app:
   Routing wise

  Angular Class good guy team added a fake server API for us, but you can create your own too:
  For our app routes:
  As the comments say, add one route for each client’s routes.
   Configuration

  Finally the last important part:
  We get our server-side main node module and then use it in ngApp every time that our client side routes get hit.
   The Preboot Case

  This preboot option here is very important. By default this option is set to false. Typo from the Angular Universal team? Too many beers at Angular Beers?
  Before Angular 2 kicks in, the user can do many actions. What would happen if we don’t stock those actions? They will just disappear once the client is ready.
   
Analysing the Angular 2 Universal Starter Kit-1 (official,because,Google,however,simple)

  Let’s have a look if this feature is broken (which would explain why it’s not used by default) or not.
   First thing we log the events stocked into  preboot_browser.ts:  
   Then we add an input into our app.ts :
  And we add a timeout in our client.ts:
  Finally we set the preboot option to true.
  The result:

Analysing the Angular 2 Universal Starter Kit-2 (official,because,Google,however,simple)

  As you can see, the events are stocked and the text typed is present.
  If we set preboot to false, the text that is typed by the user will not be transferred to Angular 2 and will just disappear.
   Conclusion

   Google bots are great but it will take a lot of time in order to be fully SEO SPA friendly. That’s why people dedicate time in order to fill this gap instead of waiting years.
   Angular 2 Universal is a mix between client and server side that can be a bit hard to understand at the beginning, just remember to put your client modules in  app. browser.module  and your server modules in  app.  node.module .
   Finally use preboot to catch events from the user before Angular is ready, even though it’s not set by default to true, it’s working as it should.
  We have seen in this tuts an implementation with a JavaScript backend, however, this can be done with other technologies like
   JAVA
  for example.
友荐云推荐




上一篇:Simulate Your Robot Before You Build It
下一篇:全世界学习Web开发的最好方式-FreeCodeCamp学习参考资料
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

不要解释 发表于 2016-10-10 15:26:55
孩子把玩具当朋友,成人把朋友当玩具。
回复 支持 反对

使用道具 举报

safvadv 发表于 2016-10-11 02:35:20
系统居然说我是在灌水,我有吗?
回复 支持 反对

使用道具 举报

muyi 发表于 2016-10-12 17:47:33
小手一抖,一分拿走!
回复 支持 反对

使用道具 举报

ss2011 发表于 2016-11-14 19:19:52
回帖也有有水平的!
回复 支持 反对

使用道具 举报

胡珊 发表于 2016-11-15 10:33:21
好帖必须得顶起
回复 支持 反对

使用道具 举报

云梦 发表于 2016-11-17 07:36:47
再过一遍。。。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表