Morden F2E Education - Think of Progressive Web Apps
-
Upload
caesar-chi -
Category
Internet
-
view
40 -
download
1
Transcript of Morden F2E Education - Think of Progressive Web Apps
-
Morden F2E Education Think of Progressive Web Apps
Caesar Chi @clonncd
-
Caesar Chi
clonncd
-
Caesar Chi 2.0
clonncd
-
What is different betweenFrontend Backend
-
This is feature for Backend
This is bug for Frontend
https://jsfiddle.net/jrsuddwL/2/
https://jsfiddle.net/jrsuddwL/2/
-
This is backend as a fronted
https://jsfiddle.net/jrsuddwL/
https://jsfiddle.net/jrsuddwL/
-
This is a fronted
https://jsfiddle.net/jrsuddwL/3/
https://jsfiddle.net/jrsuddwL/
This is backend as a fronted
https://jsfiddle.net/jrsuddwL/3/https://jsfiddle.net/jrsuddwL/
-
What is F2E?Front End Engineer
That guys implement the view and
-
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).
-
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
-
18
-
Duration: 2004 - 2016
-
Duration: 2015/12 - 2016/12
-
https://goo.gl/qQIeYq
https://goo.gl/qQIeYq
-
Newbie F2E
HTML CSS JavaScript PHP, .net, Ruby, Node
-
Newbie F2E
HTML CSS JavaScript PHP, .net, Ruby, Node
-
Newbie F2E
HTML CSS JavaScript PHP, .net, Ruby, Node
???
-
Newbie F2E
HTML CSS JavaScript PHP, .net, Ruby, Node
???
-
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
-
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
-
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
?
-
A long story
-
2016
2011/10
2013 2014 2015
Node.js TW community event
https://github.com/nodejs-tw/nodejs-wiki-book
https://github.com/nodejs-tw/nodejs-wiki-book
-
2016
2011/10
2013 2014 2015
Node.js TW community event
Node.js / Web Campus / Courses
https://github.com/nodejs-tw/nodejs-wiki-book
https://github.com/nodejs-tw/nodejs-wiki-book
-
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
https://github.com/nodejs-tw/nodejs-wiki-book
-
Campus
-
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
https://github.com/smlsunxie/mobius-cmshttps://github.com/exma-square/Xgaghttps://github.com/miiixr/pickletehttps://github.com/nodejs-tw/nodejs-wiki-book
-
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
https://github.com/smlsunxie/mobius-cmshttps://github.com/exma-square/Xgaghttps://github.com/miiixr/pickletehttps://github.com/nodejs-tw/nodejs-wiki-book
-
http://trunk-studio.com/
http://trunk-studio.com/
-
Starter layer for newbie
-
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
-
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
-
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
-
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
-
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
https://github.com/exma-square/mobious-cookbookhttps://github.com/exma-square/mobious-cookbookhttps://github.com/exma-square/rwd-in-realhttps://github.com/exma-square/sass-in-realhttps://github.com/exma-square/warehouse
-
PWA https://developers.google.com/web/fundamentals/
-
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
-
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
-
Why is PWA?Progress web app
-
Why is PWA
Concept Codelab Super team
-
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/
-
Codelab - PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
https://codelabs.developers.google.com/?cat=Web
-
PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
https://codelabs.developers.google.com/?cat=Web
-
PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
https://codelabs.developers.google.com/?cat=Web
-
PWA for newbie training
https://codelabs.developers.google.com/?cat=Web
https://codelabs.developers.google.com/?cat=Web
-
Super team - Why is PWA New Web API Web Native API Debug tool Accelerated web / mobile pages
-
Super team - Why is PWA New Web API Web Native API Debug tool Accelerated web / mobile pages Super star
-
What is Campus training
-
Campus training
Learner
-
Campus training
Professor
-
Campus training
Pro Hero
-
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
!!!
-
What is our goal
-
What is our goal ??? Know git / devTools
Full stack engineer skills
Team work
Problem solve by themselves
Follow path at beginning
-
trunk-studio.comwww.miiixr.com
http://trunk-studio.comhttp://www.miiixr.com
-
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
https://github.com/smlsunxie/mobius-cmshttps://github.com/exma-square/Xgaghttps://github.com/miiixr/pickletehttps://github.com/nodejs-tw/nodejs-wiki-book