KEMBAR78
Basics for front end developer | PPTX
2
• The misunderstanding
• How we work on projects
• The requirements skill sets
• The reasons to be or not to be
3
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
6
• Communication
• Analyse Layout
• Identify Components
• Abstract Behaviours
• Shape UI appearance
• Integrations
• Create Style Guide
7
Design Stage
Dev Stage
GM Stage
UI Designer
Visual Designer
HIE Front end
R&D
8
9
Provide Wireframe
HIE front end
R&D
UI Designer
Visual Designer
Sync Style Guide
Feedback
Provide Visual SpecTraining/Style Guide
10
11
12
Questions for StyleGuide
Supports
Provide component request
Optional
Update Style Guide
HIE front end
R&D
UI Designer
Visual Designer
13
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
Provide components source code Update Style Guide
FeedbackIntegrate into StyleGuide
HIE front end
R&D
UI Designer
Visual Designer
16
17
• Communication
• Analyse Layout
• Identify Components
• Abstract Behaviours
• Shape UI appearance
• Integrations
• Create Style Guide
• Amount 9 Months
18
19
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
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
 The reason to be a front end
developer
22
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
• 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
• RGBA
• JavaScriptTW
• HTML5 & CSS
• NodeJs
• ReactJS
• FrontEndTW
• MOPCON
26
27
視覺美感/設計思考
28
29
• Aesthetic
• Curiosity
• Challenge
• Passion
• Listening
• Logical
• Imagination
• Design thinking
• Communication
• Hands on
30
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
• 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
34
35
But
36
37
38
39
CSS
Structure Presentation
JavaScript
Interaction
40
JavaScript
Structure Presentation
Interaction
HT SSML C
vaJa Script
Presentation + Interaction
41
Front end
Designer
Front end
Developer
Interaction + Flow
42
HT SSML C
vaJa Script
Presentation + Interaction
43
Front end
Designer
Front end
Developer
Interaction + Flow
Find you own way out
44

Basics for front end developer