Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Morden F2E Education - Think of Progressive Web Apps

343 views

Published on

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.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Morden F2E Education - Think of Progressive Web Apps

  1. 1. Morden F2E Education Think of Progressive Web Apps Caesar Chi @clonncd
  2. 2. Caesar Chi clonncd
  3. 3. Caesar Chi 2.0 clonncd
  4. 4. What is different between Frontend Backend
  5. 5. This is feature for Backend This is bug for Frontend https://jsfiddle.net/jrsuddwL/2/
  6. 6. This is backend as a fronted https://jsfiddle.net/jrsuddwL/
  7. 7. This is a fronted https://jsfiddle.net/jrsuddwL/3/ https://jsfiddle.net/jrsuddwL/ This is backend as a fronted
  8. 8. What is F2E? Front End Engineer That guys implement the view and …
  9. 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. 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. 11. 前端摩爾定律律:前端每 18 ⽉月會難⼀一倍
  12. 12. Duration: 2004 - 2016
  13. 13. Duration: 2015/12 - 2016/12
  14. 14. 前端儼然成為顯學 為何前端開發依舊難尋? https://goo.gl/qQIeYq
  15. 15. Newbie F2E HTML CSS JavaScript PHP, .net, Ruby, Node …
  16. 16. Newbie F2E HTML CSS JavaScript PHP, .net, Ruby, Node …
  17. 17. Newbie F2E HTML CSS JavaScript PHP, .net, Ruby, Node … 這是世界上最遙遠的距離 … ???
  18. 18. Newbie F2E HTML CSS JavaScript PHP, .net, Ruby, Node … ???
  19. 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. 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. 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. 22. A long story …
  23. 23. 2016 2011/10 2013 2014 2015 Node.js TW community event https://github.com/nodejs-tw/nodejs-wiki-book
  24. 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. 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. 26. 加上學校社團或教授的參參與
  27. 27. 試著讓所有從 Campus 訓練出來來 都是實際上戰場的⼈人
  28. 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. 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. 30. 從規劃,實做,修正,團隊參參與 …
  31. 31. http://trunk-studio.com/ 教學型態設群活動(部分收費) http://trunk-studio.com/
  32. 32. 基本架構 Starter layer for newbie
  33. 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. 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. 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. 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. 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. 38. 加入 PWA 為起始項⽬目 https://developers.google.com/web/fundamentals/
  39. 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. 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. 41. Why is PWA? Progress web app
  42. 42. Why is PWA •Concept •Codelab •Super team
  43. 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. 44. Codelab - PWA for newbie training https://codelabs.developers.google.com/?cat=Web
  45. 45. PWA for newbie training https://codelabs.developers.google.com/?cat=Web
  46. 46. PWA for newbie training https://codelabs.developers.google.com/?cat=Web
  47. 47. PWA for newbie training https://codelabs.developers.google.com/?cat=Web
  48. 48. Super team - Why is PWA • New Web API • Web Native API • Debug tool • Accelerated web / mobile pages
  49. 49. Super team - Why is PWA • New Web API • Web Native API • Debug tool • Accelerated web / mobile pages • Super star
  50. 50. What is Campus training
  51. 51. Campus training Learner
  52. 52. Campus training Professor
  53. 53. Campus training Pro Hero
  54. 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. 55. What is our goal
  56. 56. What is our goal ??? • Know git / devTools • Full stack engineer skills • Team work • Problem solve by themselves • Follow path at beginning
  57. 57. trunk-studio.comwww.miiixr.com
  58. 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

×