O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

What is FED

268 visualizações

Publicada em

Introduce what is FED and how to be a FED from 0 ...

Publicada em: Software

What is FED

  1. 1. HOW TO BE A FRONT-END 
 DEVELOPER SAM S LEE
  2. 2. Before Start http://tmall1111.im20.com.cn/?from=timeline&isappinstalled=0
  3. 3. Sam S Lee - Frontend Engineer - Love Frontend & Backend skills - React Native speaker in Taiwan
 (2015, 2016 JSDC.tw) (2016 Modern Web tw)
  4. 4. Agenda - What is Front-end ? - How to be a FED from 0 ? - Separate Frontend & Backend - Q & A
  5. 5. What is Front-end ? PHP Mysql HTML Javascript jQuery User Interface User Experience Front-end developer Mobile CSS
  6. 6. CSS3 HTML5 Javascript
  7. 7. Really ?
  8. 8. Of course. NOT!
  9. 9. Someone may discuss about this Backend vs Frontend
  10. 10. Frontend should know Backend’s knowledge. Backend should understand Frontend. Why ?
  11. 11. This is Front-end
  12. 12. This is Back-end !! Back-end is our best friend!
  13. 13. Misunderstandings about FED
  14. 14. 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 …
  15. 15. Steps: 1. Communication 2. Analyse Layout 3. Identify Components 4. Abstract Behaviors How we Work ?
  16. 16. FED Communication: UI VD BACK END UI Flow UI SpecAPI - Discuss API interface - Discuss UI Flow - Review wireframe - Confirm Spec with UI, VD, Backend - Negotiate schedule
  17. 17. Analyse Layout
  18. 18. Identify Component / Abstract Behaviors Click Show CalendarUpdate Select
  19. 19. Steps: 1. Communication 2. Analyse Layout 3. Identify Components 4. Abstract Behaviors 5. Amount 9 months (average) How we Work ?
  20. 20. How to be a FED from 0 ?
  21. 21. First… ask your self!
  22. 22. 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…
  23. 23. Now you get a ticket to be a FED.
  24. 24. Starting learning from basic…
  25. 25. CSS3 HTML5 Javascript Frameworks ReactJS jQuery Bootstrap Gulp NodeJS Yeoman Angular Ajax Vue Webpack SASS/LESS CoffeeScript d3 WebGL
  26. 26. Now, you’re a junior FED.
  27. 27. How to be a senior FED ?
  28. 28. 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:
  29. 29. W3CSchool is your good friend! http://www.w3schools.com/
  30. 30. Sometimes you may want to give up …
  31. 31. Ask your self…
  32. 32. 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…
  33. 33. Separate Frontend & Backend
  34. 34. Why?
  35. 35. Question.
  36. 36. This is soup (Backend)
  37. 37. These are Ramen Materials (Frontend)
  38. 38. UH!
  39. 39. Ramen
  40. 40. If there has a problem in this Ramen How can I debug it ?
  41. 41. If we can separate them. That would be easy to debug !
  42. 42. Frontend is complicated Backend is also complicated
  43. 43. We should not develop like in this area FRONTEND BACKEND
  44. 44. The better way we should do… FRONTEND BACKENDAPI
  45. 45. Easy to develop Easy to debug Easy to maintenance Save your time !
  46. 46. Examples
  47. 47. Netflix Architecture
  48. 48. Facebook Architecture
  49. 49. 1. 3 FED basic skills : HTML, CSS, Javascript 2. Front-end is not only these 3 skills 3. Frontend should know backend’s knowledge
 Backend 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…
  50. 50. Q A
  51. 51. Thank You !

×