Understand front end developer

Transcript

• 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
• 3. The Misunderstanding 3
• 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
• 10. Analyse Layout 10
• 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