Front End Engineer GSS

Laura

Outline•

•

•

•

/

, , APP

/ /

UI UX RWDCross-Browser

CRUDCross-Platform

Ai, Sketch, Ps JS, CSS Gulp, NPM, Bower, Angular, Cordova, Ionic

• UI ->

•

•

•

•

JS 30%

Html 10% CSS

10%

+ 50%

—

—

CSSHTMLJS

Radar SPEED TCG APP

Angular Angular Cordova

HTML CSS

JS

HTML CSS

JS

HTML CSS

JS

HTML JS

HTML JS API

HTML Angular

HTML

JSAPI

• Install (by NPM, Bower) -

• Develop (by Gulp) -

• sass->css, jade->html, live reload

•

•

• Deploy / Production / Build (by NPM) - code minify, dirtify, , ...

• NodeJS - JavaScript runtime built on Chrome's V8 JavaScript engine

• NodeJS

• NodeJS

NPM (Node Package Management NodeJS ) gulp (Task runner) JS Framework (Cordova, Angular…)

Bower ( )

- Install

• , live reload

•

• -

• -

- Develop

GulpTask runner

• js, image ,

• html , (spacing) ,

• css , , style ( , )

- Deploy

node_module (config file: package.json) , (devDependencies), eslint,

sass bower_components (config file: bower.json)

, package.json src, library (dependencies), ionic, JQuery

gulp (config file: config.js) tasks/ task util/ task index.js gulp config.js task

src

www src src

Live DEMO• https://git.gss.com.tw/FED/project-sample

github•

• README, Document, Issues (?)

—

...

READMEDependencies

Install

Development

Deploy

File Structure, Project Management, Project Development…

README• KnowHow readme

• https://git.gss.com.tw/FED/project-sample

• https://git.gss.com.tw/FED/TCG_client_app

• Gulp https://kejyuntw.gitbooks.io/gulp-learning-notes/content/

• Gulp https://kejyuntw.gitbooks.io/gulp-learning-notes/content/

• Gulp https://kejyuntw.gitbooks.io/gulp-learning-notes/content/

• Gulp https://kejyuntw.gitbooks.io/gulp-learning-notes/content/

reference• Project Sample

https://git.gss.com.tw/FED/project-sample

• Gulp, Grunt, Bower npm http://blog.darkthread.net/post-2014-09-25-gulp-grunt-bower-npm.aspx

• Gulp https://kejyuntw.gitbooks.io/gulp-learning-notes/content/

• 11 http://hk.thenewslens.com/post/305094/

Q&A

Thanks for listening