Date post: | 13-Jan-2017 |
Category: |
Internet |
Upload: | caesar-chi |
View: | 41 times |
Download: | 1 times |
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