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/


This is backend as a fronted

https://jsfiddle.net/jrsuddwL/


This is a fronted



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

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


???

Newbie F2E We desired F2E


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






?

A long story

2016

2011/10

2013 2014 2015

Node.js TW community event

https://github.com/nodejs-tw/nodejs-wiki-book


2016

2011/10

2013 2014 2015


Node.js / Web Campus / Courses



2016

2011/10

2013 2014 2015


Node.js / Web Campus / Courses Remote campus

team training

scrum



Campus

2016

2011/10

2013 2014 2015



team training

scrum

https://github.com/smlsunxie/mobius-cms

https://github.com/exma-square/Xgag

https://github.com/miiixr/picklete


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



team training

scrum




Pro x Campus



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


Middle layer


Learning by doing


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/


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


PWA for newbie training



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




!!!

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



team training

scrum




Pro x PWA x Campus


2017

clonncd


morden f2e education - think of progressive web apps

Internet