Understand Front End Developer

Sr. Front end Engieer Randy Lien

Agenda

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

2

The Misunderstanding

3

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

How We Work

5

Steps

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

6

Communication

7

UI Designer

Visual Designer

HIE Front end

R&D

Design Stage Dev Stage GM Stage

Mockup

8

Communication - Design Stage

9

Provide Wireframe

HIE front end

R&D

UI Designer

Visual Designer

Sync Style Guide

Feedback

Provide Visual SpecTraining/Style Guide

Analyse Layout

10

Identify Component & Abstract Behaviours

11

Communication - Dev Stage

12

Questions for Style Guide

Supports

Update Style GuideProvide component request

Optional

HIE front end

R&D

UI Designer

Visual Designer

Share UI Appearance

13

Integration

1414

Images { 50 files zip copy

JavaScript { 80 files concatcompile copy

Template { 40 files concatcompile copy

CSS { 60 files compile concat copy

DevelopmentDevelopment DeploymentOp:miza:on

Minified

Encryp:on

~1  seconds ~4  minutes

Communication - GM Stage

15

Provide components source code Update Style Guide

FeedbackIntegrate into Style Guide

HIE front end

R&D

UI Designer

Visual Designer

Create Style Guide

16

Steps

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

17

The Reasons To Be Or Not To Be

18

Ask your self…

19

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

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

The reason to be a front end developer

22

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

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

Community

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

25

The Requirements Skill Sets

26

What Are Front End Relative Abilities

27

視覺美感/設計思考

Soft Skills

28

Soft Skills

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

29

Hard Skills

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

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

Today, We Have Good Tools To Make Better Products

33

Front End Technology Change Fast

34

You Can’t Stop Learning

35

But

36

You Will Find A Right Way For Yourself

37

Front End Is An Infinite Journey

38

39

HTML CSS

Structure Presentation

JavaScript

Interaction

40

HTML CSS

JavaScript

Structure Presentation

Interaction

41

HTML CSS

JavaScript

Flow + Presentation

Presentation + InteractionInteraction + Flow

UI Designer

Front end Designer

Front end Developer

42

EVERYONE IS UNIQUE

43

HTML CSS

JavaScript

Flow + Presentation

Presentation + InteractionInteraction + Flow

UI Designer

Front end Designer

Front end Developer

44

Find you own way out

Q&A