Understand the basics of to become 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. 3

4. Misunderstanding & Underestimation The 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. 5

6. 6
• Communication
• Analyse Layout
• Identify Components
• Abstract Behaviours
• Shape UI appearance
• Integrations
• Create Style Guide

7. 7
Design Stage
Dev Stage
GM Stage
UI Designer
Visual Designer
HIE Front end
R&D

8. 8

9. 9
Provide Wireframe
HIE front end
R&D
UI Designer
Visual Designer
Sync Style Guide
Feedback
Provide Visual SpecTraining/Style Guide

10. 10

11. 11

12. 12
Questions for StyleGuide
Supports
Provide component request
Optional
Update Style Guide
HIE front end
R&D
UI Designer
Visual Designer

13. 13

14. Integration
Images { 50 files 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 source code Update Style Guide
FeedbackIntegrate into StyleGuide
HIE front end
R&D
UI Designer
Visual Designer

16. 16

17. 17
• Communication
• Analyse Layout
• Identify Components
• Abstract Behaviours
• Shape UI appearance
• Integrations
• Create Style Guide
• Amount 9 Months

18. 18

19. 19

20. 20
• Are you interested 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 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 (soweird).
• You have to swallow otherscode.
• The devil is in thedetails.
21

22.  The reason to be a front end
developer
22

23. 23
• Internet Advertisement isgrowing
• 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 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

25. 25
• RGBA
• JavaScriptTW
• HTML5 & CSS
• NodeJs
• ReactJS
• FrontEndTW
• MOPCON

26. 26

27. 27
視覺美感/設計思考

28. 28

29. 29
• Aesthetic
• Curiosity
• Challenge
• Passion
• Listening
• Logical
• Imagination
• Design thinking
• Communication
• Hands on

30. 30

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
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. 33

34. 34

35. 35

36. But
36

37. 37

38. 38

39. 39
CSS
Structure Presentation
JavaScript
Interaction

40. 40
JavaScript
Structure Presentation
Interaction

41. HT SSML C
vaJa Script
Presentation + Interaction
41
Front end
Designer
Front end
Developer
Interaction + Flow

42. 42

43. HT SSML C
vaJa Script
Presentation + Interaction
43
Front end
Designer
Front end
Developer
Interaction + Flow

44. Find you own way out
44