Sam S Lee- Frontend Engineer - Love Frontend & Backend skills - React Native speaker in Taiwan (2015, 2016 JSDC.tw) (2016 Modern Web tw)
What is Front-end ?PHP
Mysql
HTMLJavascript
jQuery
User Interface User Experience
Front-end developer
Mobile
CSS
1. HTML / CSS is easy
2. You’re Visual designer or UI designer ?
3. jQuery guy
4. Good at photoshop …..
5. This is urgent
6. This is very urgent…
Misunderstandings …
Steps:
1. Communication
2. Analyse Layout
3. Identify Components
4. Abstract Behaviors
How we Work ?
FED
Communication:
UI
VDBACKEND
UI Flow
UI SpecAPI
- Discuss API interface
- Discuss UI Flow
- Review wireframe
- Confirm Spec with UI, VD, Backend
- Negotiate schedule
Steps:
1. Communication
2. Analyse Layout
3. Identify Components
4. Abstract Behaviors
5. Amount 9 months (average)
How we Work ?
1. Are you interested in design ?
2. Do you care about details ?
3. Are you eager to learn new things ?
4. Always hands on
5. Don’t limit yourself
Ask your self…
CSS3
HTML5
Javascript
FrameworksReactJS jQuery
Bootstrap
GulpNodeJS
Yeoman
Angular
AjaxVue Webpack
SASS/LESS
CoffeeScript
d3
WebGL
LV 1 : Write a page by HTML/CSS, Make dynamic page by javascript
LV 2 : Based on LV1, make sure it can cross-browser (Browser compatibility)
LV 3 : Based on LV2, write less code to do more things
LV 4 : Based on LV3, care about code/component reusable and code maintenance
LV 5 : Based on LV4, improve page performance
LV 6 : Based on LV5, enhance develop performance
LV 7 : Based on LV6, start to learn and implement new FED technologies / frameworks like : ES6 / React / Angular …etc
Frontend Level List:
1. Are you still interested in design ?
2. Do you still care about details ?
3. Are you still eager to learn new things ?
4. Still Always hands on
5. Do you limit yourself ??
Ask your self…
1. 3 FED basic skills : HTML, CSS, Javascript
2. Front-end is not only these 3 skills
3. Frontend should know backend’s knowledgeBackend should know what is Frontend
4. Communication is very very very important
5. 7 level for front-end.
6. Separate front-end & back-end
7. Always hands on !
8. Don’t limit yourself !!!
Let’s recap…