HOW TO BE A FRONT-END DEVELOPER

SAM S LEE

Before Start

http://tmall1111.im20.com.cn/?from=timeline&isappinstalled=0

Sam S Lee- Frontend Engineer - Love Frontend & Backend skills - React Native speaker in Taiwan (2015, 2016 JSDC.tw) (2016 Modern Web tw)

Agenda

- What is Front-end ?

- How to be a FED from 0 ?

- Separate Frontend & Backend

- Q & A

What is Front-end ?PHP

Mysql

HTMLJavascript

jQuery

User Interface User Experience

Front-end developer

Mobile

CSS

CSS3

HTML5

Javascript

Really ?

Of course. NOT!

Someone may discuss about thisBackend vs Frontend

Frontend should know Backend’s knowledge.

Backend should understand Frontend.

Why ?

This is Front-end

This is Back-end !!

Back-end is our best friend!

Misunderstandings about FED

1. HTML / CSS is easy

2. You’re Visual designer or UI designer ?

3. jQuery guy

4. Good at photoshop …..

5. This is urgent

6. This is very urgent…

Misunderstandings …

Steps:

1. Communication

2. Analyse Layout

3. Identify Components

4. Abstract Behaviors

How we Work ?

FED

Communication:

UI

VDBACKEND

UI Flow

UI SpecAPI

- Discuss API interface

- Discuss UI Flow

- Review wireframe

- Confirm Spec with UI, VD, Backend

- Negotiate schedule

Analyse Layout

Identify Component / Abstract Behaviors

Click

Show CalendarUpdate Select

Steps:

1. Communication

2. Analyse Layout

3. Identify Components

4. Abstract Behaviors

5. Amount 9 months (average)

How we Work ?

How to be a FED from 0 ?

First… ask your self !

1. Are you interested in design ?

2. Do you care about details ?

3. Are you eager to learn new things ?

4. Always hands on

5. Don’t limit yourself

Ask your self…

Now you get a ticket to be a FED.

Starting learning from basic…

CSS3

HTML5

Javascript

FrameworksReactJS jQuery

Bootstrap

GulpNodeJS

Yeoman

Angular

AjaxVue Webpack

SASS/LESS

CoffeeScript

d3

WebGL

Now, you’re a junior FED.

How to be a senior FED ?

LV 1 : Write a page by HTML/CSS, Make dynamic page by javascript

LV 2 : Based on LV1, make sure it can cross-browser (Browser compatibility)

LV 3 : Based on LV2, write less code to do more things

LV 4 : Based on LV3, care about code/component reusable and code maintenance

LV 5 : Based on LV4, improve page performance

LV 6 : Based on LV5, enhance develop performance

LV 7 : Based on LV6, start to learn and implement new FED technologies / frameworks like : ES6 / React / Angular …etc

Frontend Level List:

W3CSchool is your good friend!

http://www.w3schools.com/

Sometimes you may want to give up …

Ask your self…

1. Are you still interested in design ?

2. Do you still care about details ?

3. Are you still eager to learn new things ?

4. Still Always hands on

5. Do you limit yourself ??

Ask your self…

Separate Frontend & Backend

Why?

Question.

This is soup (Backend)

These are Ramen Materials (Frontend)

UH!

Ramen

If there has a problem in this Ramen

How can I debug it ?

If we can separate them.

That would be easy to debug !

Frontend is complicated

Backend is also complicated

We should not develop like in this area

FRONTEND BACKEND

The better way we should do…

FRONTEND BACKENDAPI

Easy to develop

Easy to debug

Easy to maintenance

Save your time !

Examples

Netflix Architecture

Facebook Architecture

1. 3 FED basic skills : HTML, CSS, Javascript

2. Front-end is not only these 3 skills

3. Frontend should know backend’s knowledgeBackend should know what is Frontend

4. Communication is very very very important

5. 7 level for front-end.

6. Separate front-end & back-end

7. Always hands on !

8. Don’t limit yourself !!!

Let’s recap…

Q A

Thank You !