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 UI Designer Visual Designer HIE Front end R&D Design Stage Dev Stage GM Stage
8. Mockup 8
9. Communication - Design Stage 9 Provide Wireframe HIE front end R&D UI Designer Visual Designer Sync Style Guide Feedback Provide Visual Spec Training/Style Guide
10. Analyse Layout 10
11. Identify Component & Abstract Behaviours 11
12. Communication - Dev Stage 12 Questions for Style Guide Supports Update Style Guide Provide component request Optional HIE front end R&D UI Designer Visual Designer
13. Share UI Appearance 13
14. Integration 14 14 Images { 50 files zip copy JavaScript { 80 files concat compile copy Template { 40 files concat compile copy CSS { 60 files compile concat copy Development Development Deployment Op:miza:on Minified Encryp:on ~1  seconds ~4  minutes
15. Communication - GM Stage 15 Provide components source code Update Style Guide Feedback Integrate into Style Guide 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. 31 HTML CSS Images JavaScript HTML5 CSS3 Database PHP/C# Security Server Network Testing Patterns Canvas Gesture Performance Localization Library Accessibility Responsive Design Visual Mobile Browsers Modularization
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 )5.- $44 Structure Presentation +BWB4DSJQU Interaction
40. 40 )5.- $44 +BWB4DSJQU Structure Presentation Interaction
41. 41 )5.- $44 +BWB4DSJQU Flow + Presentation Presentation + Interaction Interaction + Flow UI Designer Front end Designer Front end Developer
42. 42 EVERYONE IS UNIQUE
43. 43 )5.- $44 +BWB4DSJQU Flow + Presentation Presentation + Interaction Interaction + Flow UI Designer Front end Designer Front end Developer
44. 44 Find you own way out
45. Q&A