We focus on newbie front end / JavaScript full-stack engineer training, we will tell training evolution.
And we well tell you how PWA works in training process.
9. F2E
• HTML, CSS, JS experts
• Manually convert photoshop to web view
• Know browser features
• Know backend API
• Know HTTP protocol
• Prevent XSS
• Know some frameworks (JS, CSS).
10. F2E -> 2016
• HTML, CSS, JS experts
• Manually convert photoshop to web view (user interface)
• Know browser features and mobile browser feature / API
• Know backend API and Node.js or GO.
• Know HTTP protocol and HTTP2 / HTTPS
• Prevent XSS and CORS and …
• Know some frameworks (JS, CSS) and sass, webpack, grunt,
gulp
28. 2016
2011/10
2013 2014 2015
Node.js TW
community event
Node.js / Web
Campus / Courses
Remote campus
team training
scrum
https://github.com/smlsunxie/mobius-cms
https://github.com/exma-square/Xgag
https://github.com/miiixr/picklete
https://github.com/nodejs-tw/nodejs-wiki-book
29. 2016
2011/10
2013 2014 2015
Node.js TW
community event
Node.js / Web
Campus / Courses
Remote campus
team training
scrum
https://github.com/smlsunxie/mobius-cms
https://github.com/exma-square/Xgag
https://github.com/miiixr/picklete
Pro x Campus
https://github.com/nodejs-tw/nodejs-wiki-book
43. Concept - Why is PWA
• DOM
• Shadow DOM v1: Self-Contained Web Components
• Custom Elements v1: Reusable Web Components
• Measure Performance with the RAIL Model
• JavaScript
• What Makes a Good Mobile Site?
• JavaScript Promises: an Introduction
• Product UX / UI & CSS
• Basics of UX
• Responsive Web Design Basic
• Create Amazing Forms
• Animation
• Accessibility https://developers.google.com/web/fundamentals/
44. Codelab - PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
45. PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
46. PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
47. PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
48. Super team - Why is PWA
• New Web API
• Web Native API
• Debug tool
• Accelerated web / mobile pages
49. Super team - Why is PWA
• New Web API
• Web Native API
• Debug tool
• Accelerated web / mobile pages
• Super star
58. 2016
2011/10
2013 2014 2015
Node.js TW
community event
Node.js / Web
Campus / Courses
Remote campus
team training
scrum
https://github.com/smlsunxie/mobius-cms
https://github.com/exma-square/Xgag
https://github.com/miiixr/picklete
Pro x PWA x Campus
https://github.com/nodejs-tw/nodejs-wiki-book
2017
clonncd