What is the next step for a front end beginner

An introduction for people who want to learn more in front end technology

Transcript

1. TREND MICRO What Is Next? Sr. Front end Engieer Randy Lien
2. Agenda • Challenges In Industry • Next • Wrap up • Q&A 2
3. Challenges In Industry 3
4. Challenges In Industry • Performance Challenge • Architecture Challenge • Reusable Components Challenge 4
5. Challenge In Industry 5
6. Performance Challenge • How to handle DDoS ? • How to provide good user experience ? • 1 second display 6
7. Architecture Challenge 7
8. Architecture Challenge • How to maintain large app’s architecture? • How to collaborate with others? • How to test? • How to do automation? • How long can your architecture live? • Performance, Readability, Scalability, Package Size 8
9. Reusable Component Challenge 9
10. Reusable Component Challenge • What is your reusable component strategy ? • How to manage your components ? • How can you reuse it ? • How to persuade your colleagues ? • How to solve legacy problems ? 10
11. Next 11
12. Next • Be a CSS Samurai • Be a JavaScript Ninja • Read codes (Github is a good playground) • Watch Conference • Design your own product 12
13. Be A Css Samurai • Use Preprocessor • Learn CSS framework • Understand OOCSS and SMACSS concept 13
14. Use Preprocessor • Less • Sass 14
15. Learn Css Framework - Bootstrap 15
16. Learn Css Framework - Foundation 16
17. Understand Oocss & Smacss • Identify reusable objects • Minimize selectors • Extend your classes • Sub classing <div class=”box box-highlight”></div> • Style separate from content • Content separate from container • Design a module without its context 17
18. Smacss 18
19. Css Naming • Layout • Use l- or layout- • layout-passwords • State • Use is- as a prefix • is-hidden, is-enable, is-disable, is-selected • Module • Go with the name of module itself • Use the module name as prefix for its variation • .navigation, .navigation-primary 19
20. Be A Javascript Ninja • Use jQuery but don’t be controlled (Cost $) • Study Design Patterns • Pick a framework and understand how it works 20
21. Study Design Patterns 21 Learn JavaScript Design Patterns
22. Pick A Framework And Understand How It Works • Understand how MVC framework works • Backbone.js/Marionette.js is a good start • Try to use RequireJS or Browserify to manage your modules • Try React 22
23. The Brilliant Design 23
24. Wrap Up 24
25. About Front End Development • Web technology is everywhere. • Keep the fundamental in mind. • Always be curious and humble. • It is a long journey and you will learn new things and enjoy it. • Don’t think, just do it. 25
26. Thanks 26