Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Angular 2 + AWS Lambda 

2016. 11. 28. dots. 

AKIRA-MIYAKE
• AKIRA-MIYAKE

• Blog: http://dream-of-electric-cat.hatenablog.com/

• Twitter: @DreamOfEleCat

• GitHub: https://github....
Agenda
1. 

2. Angular2 

3.
1. (SSR)
• = HTML JS DOM
: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
Single-Page Application(SPA) 

• JS 

• JS DOM 

• JS
: https://developers.google.com/web/fundamentals/performance/critica...
• 3 → 40%

• → 79%

• → 52%

• → 44%

• 1 16%
: https://blog.kissmetrics.com/loading-time/?wide=1
SEO
• Googlebot 

• 

• Promise, Service Worker, Fetch API, Local Storage,
ES6/ES2015 

• onLoad 

• SPA
: https://www.you...
Googlebot
• 

• raw HTML 

• SPA URL raw HTML 

•
: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
SSR
• Google Search Console Googlebot


•


• Pre-Rendering = SSR Googlebot
2. Angular2 SSR
SSR
• 

• 

• JS 

• PhantomJS, CasperJS 

• prerender.io 

• Virtual DOM

• Virtual DOM JS 

• DOM HTML 

• Angular2, Rea...
2. Angular2 SSR
Angular Universal
• https://github.com/angular/universal

• Universal Angular 

• Node.js ASP.NET
Angular Universal
ServicesComponents …
AppModule for

Browser
AppModule for

Node
platformBrowserDynamic()

.bootstrapModu...
3. SSR
• AWS Lambda Azure Functions Google Cloud
Functions 

• Function-as-a-Service(FaaS) 

• FaaS
: https://www.youtube.com/wat...
• 

• 

•
AWS
•
• Googlebot
• Lambda 

•


•
Angular SPA Lambda
• 

• HTTP


• HTML S3 

• 

• Cache
React
• SSR 

• Isomorphic Node


• Flux


• Lambda 

• URL
Lambda
• SPA
SEO 

• Angular2 Angular
Universal 

•


• SSR
SPA
angular2-universal-render
• https://github.com/AKIRA-MIYAKE/angular2-universal-
render

• Lambda npm


• express-engine 

...
Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
Prochain SlideShare
Chargement dans…5
×

Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた

1 929 vues

Publié le

2016/11/28に開催されたdots. フロントエンドエンジニア部のビアバッシュで発表した際の資料です。

Publié dans : Logiciels
  • Soyez le premier à commenter

Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた

  1. 1. Angular 2 + AWS Lambda 2016. 11. 28. dots. AKIRA-MIYAKE
  2. 2. • AKIRA-MIYAKE • Blog: http://dream-of-electric-cat.hatenablog.com/ • Twitter: @DreamOfEleCat • GitHub: https://github.com/AKIRA-MIYAKE • + • UI JavaScript/HTML/CSS • Docker CI AWS • iOS
  3. 3. Agenda 1. 2. Angular2 3.
  4. 4. 1. (SSR)
  5. 5. • = HTML JS DOM : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
  6. 6. Single-Page Application(SPA) • JS • JS DOM • JS : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
  7. 7. • 3 → 40% • → 79% • → 52% • → 44% • 1 16% : https://blog.kissmetrics.com/loading-time/?wide=1
  8. 8. SEO • Googlebot • • Promise, Service Worker, Fetch API, Local Storage, ES6/ES2015 • onLoad • SPA : https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
  9. 9. Googlebot • • raw HTML • SPA URL raw HTML • : https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
  10. 10. SSR • Google Search Console Googlebot • • Pre-Rendering = SSR Googlebot
  11. 11. 2. Angular2 SSR
  12. 12. SSR • • • JS • PhantomJS, CasperJS • prerender.io • Virtual DOM • Virtual DOM JS • DOM HTML • Angular2, React, Vue 2.0
  13. 13. 2. Angular2 SSR
  14. 14. Angular Universal • https://github.com/angular/universal • Universal Angular • Node.js ASP.NET
  15. 15. Angular Universal ServicesComponents … AppModule for Browser AppModule for Node platformBrowserDynamic() .bootstrapModule() platformUniversalDynamic() .serializeModule() DOM HTML UniversalModule for Browser UniversalModule for Node Inject Modules Inject Modules Browser Server Angular Application
  16. 16. 3. SSR
  17. 17. • AWS Lambda Azure Functions Google Cloud Functions • Function-as-a-Service(FaaS) • FaaS : https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
  18. 18. • • •
  19. 19. AWS
  20. 20. • • Googlebot
  21. 21. • Lambda • •
  22. 22. Angular SPA Lambda • • HTTP • HTML S3 • • Cache
  23. 23. React • SSR • Isomorphic Node • Flux • Lambda • URL Lambda
  24. 24. • SPA SEO • Angular2 Angular Universal • • SSR SPA
  25. 25. angular2-universal-render • https://github.com/AKIRA-MIYAKE/angular2-universal- render • Lambda npm • express-engine • Cache

×