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

1. Angular 2 + AWS Lambda
2016. 11. 28. dots.
AKIRA-MIYAKE

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. Agenda
1.
2. Angular2
3.

4. 1. (SSR)

5. • = HTML JS DOM
: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

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

7. • 3 → 40%
• → 79%
• → 52%
• → 44%
• 1 16%
: https://blog.kissmetrics.com/loading-time/?wide=1

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. Googlebot
•
• raw HTML
• SPA URL raw HTML
•
: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be

10. SSR
• Google Search Console Googlebot
•
• Pre-Rendering = SSR Googlebot

11. 2. Angular2 SSR

12. SSR
•
•
• JS
• PhantomJS, CasperJS
• prerender.io
• Virtual DOM
• Virtual DOM JS
• DOM HTML
• Angular2, React, Vue 2.0

13. 2. Angular2 SSR

14. Angular Universal
• https://github.com/angular/universal
• Universal Angular
• Node.js ASP.NET

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. 3. SSR

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. •
•
•

19. AWS

20. •
• Googlebot

21. • Lambda
•
•

22. Angular SPA Lambda
•
• HTTP
• HTML S3
•
• Cache

23. React
• SSR
• Isomorphic Node
• Flux
• Lambda
• URL
Lambda

25. • SPA
SEO
• Angular2 Angular
Universal
•
• SSR
SPA

26. angular2-universal-render
• https://github.com/AKIRA-MIYAKE/angular2-universal-
render
• Lambda npm
• express-engine
• Cache