Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understand front end developer

Randy Lien
December 06, 2014

Understand front end developer

Randy Lien

December 06, 2014
Tweet

More Decks by Randy Lien

Other Decks in Technology

Transcript

  1. Agenda • The misunderstanding • How we work on projects

    • The requirements skill sets • The reasons to be or not to be 2
  2. 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
  3. Steps • Communication • Analyse Layout • Identify Components •

    Abstract Behaviours • Shape UI appearance • Integrations • Create Style Guide 6
  4. 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
  5. 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
  6. 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 Minified Encryp:on ~1  seconds ~4  minutes
  7. 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
  8. Steps • Communication • Analyse Layout • Identify Components •

    Abstract Behaviours • Shape UI appearance • Integrations • Create Style Guide • Amount 9 Months 17
  9. 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
  10. 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
  11. 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
  12. 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
  13. Community • RGBA • JavaScriptTW • HTML5 & CSS •

    NodeJs • ReactJS • FrontEndTW • MOPCON 25
  14. Soft Skills • Aesthetic • Curiosity • Challenge • Passion

    • Listening • Logical • Imagination • Design thinking • Communication • Hands on 29
  15. 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
  16. 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
  17. 41 )5.- $44 +BWB4DSJQU Flow + Presentation Presentation + Interaction

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

    Interaction + Flow UI Designer Front end Designer Front end Developer
  19. Q&A