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