TREND MICRO
What Is Next?
Sr. Front end Engieer Randy Lien
Agenda
• Challenges In Industry • Next • Wrap up • Q&A
2
Challenges In Industry
3
Challenges In Industry
• Performance Challenge • Architecture Challenge • Reusable Components Challenge
4
Challenge In Industry
5
Performance Challenge
• How to handle DDoS ? • How to provide good user experience ? • 1 second display
6
Architecture Challenge
7
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
Reusable Component Challenge
9
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
Next
11
Next
• Be a CSS Samurai • Be a JavaScript Ninja • Read codes (Github is a good playground) • Watch Conference • Design your own product
12
Be A Css Samurai
• Use Preprocessor • Learn CSS framework • Understand OOCSS and SMACSS concept
13
Use Preprocessor
• Less • Sass
14
Learn Css Framework - Bootstrap
15
Learn Css Framework - Foundation
16
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
Smacss
18
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
Be A Javascript Ninja
• Use jQuery but don’t be controlled (Cost $) • Study Design Patterns • Pick a framework and understand how it works
20
Study Design Patterns
21
Learn JavaScript Design Patterns
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
The Brilliant Design
23
Wrap Up
24
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
Thanks
26