Understand front end developer

Slide 1

Slide 1 text

Understand Front End Developer Sr. Front end Engieer Randy Lien

Slide 2

Slide 2 text

Agenda • The misunderstanding • How we work on projects • The requirements skill sets • The reasons to be or not to be 2

Slide 3

Slide 3 text

The Misunderstanding 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

How We Work 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Mockup 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Analyse Layout 10

Slide 11

Slide 11 text

Identify Component & Abstract Behaviours 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Share UI Appearance 13

Slide 14

Slide 14 text

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 Miniﬁed Encryp:on ~1 seconds ~4 minutes

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Create Style Guide 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

The Reasons To Be Or Not To Be 18

Slide 19

Slide 19 text

Ask your self… 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

The reason to be a front end developer 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Technology • CSS/HTML/JavaScript is mature • HTML5 Spec conﬁrm • Almost can run everywhere • Lots of companies support • Development environment become better • Learning curve is lower (Compare with C++ /ObjC) • Huge online resource 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

The Requirements Skill Sets 26

Slide 27

Slide 27 text

What Are Front End Relative Abilities 27 視覺美感/設計思考

Slide 28

Slide 28 text

Soft Skills 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Hard Skills 30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Today, We Have Good Tools To Make Better Products 33

Slide 34

Slide 34 text

Front End Technology Change Fast 34

Slide 35

Slide 35 text

You Can’t Stop Learning 35

Slide 36

Slide 36 text

But 36

Slide 37

Slide 37 text

You Will Find A Right Way For Yourself 37

Slide 38

Slide 38 text

Front End Is An Inﬁnite Journey 38

Slide 39

Slide 39 text

39 )5.- $44 Structure Presentation +BWB4DSJQU Interaction

Slide 40

Slide 40 text

40 )5.- $44 +BWB4DSJQU Structure Presentation Interaction

Slide 41

Slide 41 text

41 )5.- $44 +BWB4DSJQU Flow + Presentation Presentation + Interaction Interaction + Flow UI Designer Front end Designer Front end Developer

Slide 42

Slide 42 text

42 EVERYONE IS UNIQUE

Slide 43

Slide 43 text

43 )5.- $44 +BWB4DSJQU Flow + Presentation Presentation + Interaction Interaction + Flow UI Designer Front end Designer Front end Developer