Download to read offline
Basics for front end developer
- 2. 2 • The misunderstanding •How we work on projects • The requirements skill sets • The reasons to be or not to be
- 3.
- 4. Misunderstanding & UnderestimationThe Complexity Of Front End Development • You are good atphotoshop • 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.
- 6. 6 • Communication • AnalyseLayout • Identify Components • Abstract Behaviours • Shape UI appearance • Integrations • Create Style Guide
- 7. 7 Design Stage Dev Stage GMStage UI Designer Visual Designer HIE Front end R&D
- 8.
- 9. 9 Provide Wireframe HIE frontend R&D UI Designer Visual Designer Sync Style Guide Feedback Provide Visual SpecTraining/Style Guide
- 10.
- 11.
- 12. 12 Questions for StyleGuide Supports Providecomponent request Optional Update Style Guide HIE front end R&D UI Designer Visual Designer
- 13.
- 14. Integration Images { 50files zip copy JavaScript { 80 files concatcompile copy Template { 40 files concatcompile copy CSS { 60 files compile concat copy DevelopmentDevelopment Deployment Optimization Minified Encryption ~1 seconds ~4 minutes 1144
- 15. 15 Provide components sourcecode Update Style Guide FeedbackIntegrate into StyleGuide HIE front end R&D UI Designer Visual Designer
- 16.
- 17. 17 • Communication • AnalyseLayout • Identify Components • Abstract Behaviours • Shape UI appearance • Integrations • Create Style Guide • Amount 9 Months
- 18.
- 19.
- 20. 20 • Are youinterested indesign? • 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
- 21. UI engineering iscool (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 (soweird). • You have to swallow otherscode. • The devil is in thedetails. 21
- 22. The reasonto be a front end developer 22
- 23. 23 • Internet Advertisementisgrowing • 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
- 24. 24 • CSS/HTML/JavaScript ismature • 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
- 25. 25 • RGBA • JavaScriptTW •HTML5 & CSS • NodeJs • ReactJS • FrontEndTW • MOPCON
- 26.
- 27.
- 28.
- 29. 29 • Aesthetic • Curiosity •Challenge • Passion • Listening • Logical • Imagination • Design thinking • Communication • Hands on
- 30.
- 31.
- 32. 32 • Understand CSS,JavaScript,HTML • Understand CSS3,Advanced JavaScript,HTML5 • Understand more • Grid system, responsivetechniques • JavaScript Design Patterns • Server side techniques • Database • Performance • Visualization • Visual and design sense
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. HT SSML C vaJaScript Presentation + Interaction 41 Front end Designer Front end Developer Interaction + Flow
- 42.
- 43. HT SSML C vaJaScript Presentation + Interaction 43 Front end Designer Front end Developer Interaction + Flow
- 44. Find you ownway out 44