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.

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