Understand front end developer
15 likes7,268 views
The document discusses front end development and the skills required. It begins by addressing misunderstandings about front end work, noting the complexity involved. It outlines the steps taken in front end projects, including communication, layout analysis, component identification, and integration. The document discusses reasons one may or may not want to pursue front end development, noting it requires skills like aesthetics, curiosity, and communication. Hard skills mentioned include HTML, CSS, JavaScript, performance, and responsiveness. Throughout, it emphasizes that front end work requires constant learning as technologies evolve rapidly.
Understand front end developer
- 1. Understand Front End Developer Sr. Front end Engieer Randy Lien
- 2. Agenda • The misunderstanding • How we work on projects • The requirements skill sets • The reasons to be or not to be 2
- 4. Misunderstanding & Underestimation The Complexity Of Front End Development • You are good at photoshop • Visual designer ? UI Designer ? • CSS/HTML looks like easy • jQuery guy • Wording change is easy, right? • Move something from OOO to XXXX, it is right? • This is urgent • This is very urgent 4
- 5. How We Work 5
- 6. Steps • Communication • Analyse Layout • Identify Components • Abstract Behaviours • Shape UI appearance • Integrations • Create Style Guide 6
- 7. Communication 7 Design Stage Dev Stage GM Stage UI Designer Visual Designer HIE Front end R&D
- 8. Mockup 8
- 9. Communication - Design Stage 9 Provide Wireframe HIE front end R&D UI Designer Visual Designer Sync Style Guide Feedback Training/Style Guide Provide Visual Spec
- 11. Identify Component & Abstract Behaviours 11
- 12. Communication - Dev Stage 12 Provide component request Questions for Style Guide Update Style Guide Supports Optional HIE front end R&D UI Designer Visual Designer
- 13. Share UI Appearance 13
- 14. Integration 1144 DDeeveveloloppmmeennt t Deployment Images { 50 files zip copy JavaScript { 80 files compile concat copy Template { 40 files compile concat copy CSS { 60 files compile concat copy Op:miza:on Minified Encryp:on ~1 seconds ~4 minutes
- 15. Communication - GM Stage 15 Provide components source code Update Style Guide Integrate into Style Guide Feedback HIE front end R&D UI Designer Visual Designer
- 16. Create Style Guide 16
- 17. Steps • Communication • Analyse Layout • Identify Components • Abstract Behaviours • Shape UI appearance • Integrations • Create Style Guide • Amount 9 Months 17
- 18. The Reasons To Be Or Not To Be 18
- 19. Ask your self… 19
- 20. Ask your self • Are you interested in design? • Do you care about details ? • Do you know how to play magic ? • Are you eager to learn new things ? • Can you accept non-logical problems ? • Always hands on • Don’t limit yourself 20
- 21. UI engineering is cool (sometimes) but not always, because… • You have to deal with many cross browsers issues. • You will face to non-logical problems like CSS. • You might repeat doing similar things. • You have to do lots of communication with designers and developers. • You have to handle presentation and behaviours. • Schedule is always tight (so weird). • You have to swallow others code. • The devil is in the details. 21
- 22. The reason to be a front end developer 22
- 23. Human Resource Marketing • Internet Advertisement is growing • Cloud services are on the rocket • Trend Micro, Yahoo, KKBOX, hTC • Existing services need mobile web solution • Trend Micro, Yahoo, KKBOX • Big data needs to do visualization • Trend Micro is still hiring 23
- 24. Technology • CSS/HTML/JavaScript is mature • HTML5 Spec confirm • Almost can run everywhere • Lots of companies support • Development environment become better • Learning curve is lower (Compare with C++ /ObjC) • Huge online resource 24
- 25. Community • RGBA • JavaScriptTW • HTML5 & CSS • NodeJs • ReactJS • FrontEndTW • MOPCON 25
- 26. The Requirements Skill Sets 26
- 27. What Are Front End Relative Abilities 27 視覺美感/設計思考
- 28. Soft Skills 28
- 29. Soft Skills • Aesthetic • Curiosity • Challenge • Passion • Listening • Logical • Imagination • Design thinking • Communication • Hands on 29
- 30. Hard Skills 30
- 31. Browsers Modularization 31 CSS Images HTML JavaScript CSS3 HTML5 PHP/C# Database Server Security Network Testing Patterns Canvas Gesture Performance Localization Library Accessibility Responsive Mobile Design Visual
- 32. The Front End Need To Know... • Understand CSS, JavaScript, HTML • Understand CSS3, Advanced JavaScript, HTML5 • Understand more • Grid system, responsive techniques • JavaScript Design Patterns • Server side techniques • Database • Performance • Visualization • Visual and design sense 32
- 33. Today, We Have Good Tools To Make Better Products 33
- 34. Front End Technology Change Fast 34
- 35. You Can’t Stop Learning 35
- 36. But 36
- 37. You Will Find A Right Way For Yourself 37
- 38. Front End Is An Infinite Journey 38
- 39. 39 HTML CSS Structure Presentation JavaScript Interaction
- 40. Structure Presentation 40 HTML CSS JavaScript Interaction
- 41. 41 UI Designer Flow + Presentation HTML CSS JavaScript Front end Designer Front end Developer Presentation Interaction + Flow + Interaction
- 42. 42 EVERYONE IS UNIQUE
- 43. 43 UI Designer Flow + Presentation HTML CSS JavaScript Front end Designer Front end Developer Presentation Interaction + Flow + Interaction
- 44. 44 Find you own way out
- 45. Q&A