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.

1. Morden F2E Education
Think of Progressive Web Apps
Caesar Chi
@clonncd

2. Caesar Chi
clonncd

3. Caesar Chi
2.0
clonncd

4. What is different between
Frontend Backend

5. This is feature for Backend
This is bug for Frontend
https://jsfiddle.net/jrsuddwL/2/

6. This is backend as a fronted
https://jsfiddle.net/jrsuddwL/

7. This is a fronted
https://jsfiddle.net/jrsuddwL/3/
https://jsfiddle.net/jrsuddwL/
This is backend as a fronted

8. What is F2E?
Front End Engineer
That guys implement the view and …

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

11. 前端摩爾定律律：前端每 18 ⽉月會難⼀一倍

12. Duration: 2004 - 2016

13. Duration: 2015/12 - 2016/12

14. 前端儼然成為顯學
為何前端開發依舊難尋？
https://goo.gl/qQIeYq

15. Newbie F2E
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …

16. Newbie F2E
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …

17. Newbie F2E
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
這是世界上最遙遠的距離 …
???

18. Newbie F2E
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
???

19. Newbie F2E We desired F2E
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
UI / UX (form, table, panel…)
Product concept
Web components
BDD / TDD / UI Test
Team work
Familiar with xxx framework

20. Newbie F2E We desired F2E Hero
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
UI / UX (form, table, panel…)
Product concept
Web components
BDD / TDD / UI Test
Team work
Familiar with xxx framework

21. Newbie F2E We desired F2E
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
UI / UX (form, table, panel…)
Product concept
Web components
BDD / TDD / UI Test
Team work
Familiar with xxx framework
?

22. A long story …

23. 2016
2011/10
2013 2014 2015
Node.js TW
community event
https://github.com/nodejs-tw/nodejs-wiki-book

24. 2016
2011/10
2013 2014 2015
Node.js TW
community event
Node.js / Web
Campus / Courses
https://github.com/nodejs-tw/nodejs-wiki-book

25. 2016
2011/10
2013 2014 2015
Node.js TW
community event
Node.js / Web
Campus / Courses
Remote campus
team training
scrum
https://github.com/nodejs-tw/nodejs-wiki-book

26. 加上學校社團或教授的參參與

27. 試著讓所有從 Campus 訓練出來來
都是實際上戰場的⼈人

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

30. 從規劃，實做，修正，團隊參參與 …

31. http://trunk-studio.com/
教學型態設群活動（部分收費）
http://trunk-studio.com/

32. 基本架構
Starter layer for newbie

33. Starter layer
• HTML
• CSS
• JavaScript
• PHP, .net, Ruby, Node …
• UI / UX (form, table, panel…)
• Web components
• BDD / TDD / UI Test
• Product concept
• Team work
• Familiar with xxx framework
Basic layer

34. Starter layer
• HTML
• CSS
• JavaScript
• PHP, .net, Ruby, Node …
• UI / UX (form, table, panel…)
• Web components
• BDD / TDD / UI Test
• Product concept
• Team work
• Familiar with xxx framework
Middle layer

35. Starter layer
• HTML
• CSS
• JavaScript
• PHP, .net, Ruby, Node …
• UI / UX (form, table, panel…)
• Web components
• BDD / TDD / UI Test
• Product concept
• Team work
• Familiar with xxx framework
Learning by doing

36. Starter layer
• HTML
• CSS
• JavaScript
• PHP, .net, Ruby, Node …
• UI / UX (form, table, panel…)
• Web components
• BDD / TDD / UI Test
• Product concept
• Team work
• Familiar with xxx framework
Basic layer
Middle layer
Learning by doing

37. 基本教材 Basic tour
• https://github.com/exma-square/mobious-
cookbook
• https://github.com/exma-square/rwd-in-real
• https://github.com/exma-square/sass-in-real
• https://github.com/exma-square/warehouse

38. 加入 PWA 為起始項⽬目
https://developers.google.com/web/fundamentals/

39. Starter layer
• HTML
• CSS
• JavaScript
• PHP, .net, Ruby, Node …
• UI / UX (form, table, panel…)
• Web components
• BDD / TDD / UI Test
• Product concept
• Team work
• Familiar with xxx framework
Middle layer

40. Starter layer
• HTML
• CSS
• JavaScript
• PHP, .net, Ruby, Node …
• UI / UX (form, table, panel…)
• Web components
• BDD / TDD / UI Test
• Product concept
• Team work
• Familiar with xxx framework
Middle layer

41. Why is PWA?
Progress web app

42. Why is PWA
•Concept
•Codelab
•Super team

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

50. What is Campus training

51. Campus training
Learner

52. Campus training
Professor

53. Campus training
Pro Hero

54. Newbie F2E We desired F2E
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
HTML
CSS
JavaScript
PHP, .net, Ruby, Node …
UI / UX (form, table, panel…)
Product concept
Web components
BDD / TDD / UI Test
Team work
Familiar with xxx framework
!!!

55. What is our goal

56. What is our goal ???
• Know git / devTools
• Full stack engineer skills
• Team work
• Problem solve by themselves
• Follow path at beginning

57. trunk-studio.comwww.miiixr.com

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