+ - 0:00:00
Notes for current slide
Notes for next slide

Secrets of a

Front End Ninja*

*Senior Front End Developer

1 / 72

Secrets of a

Front End Ninja*

2017 Edition

Image by Thăngfly

2 / 72

About me:

Trần Trọng Thanh

  • CTO of NauStud.io
  • Front End Architect
  • 4 years with Flash / ActionScript
  • 6 years with Web Front End & JavaScript
  • Currator of SaigonJS FB group

/trongthanh @trongthanh fb.me/trongthanh

3 / 72

Agenda

  • Modern Front End developers, who are they?
  • The baseline skill set of a modern F.E. dev.
  • Roadmap to Senior Front End Developer
  • How to get started and improve as a Front End developer by yourself
    • [Sub-topic] The chicken & egg paradox of Front End learning
  • Front End Trend 2017 👍
  • Q&A
4 / 72

Modern Front End Developers

Who are they?

Front End Guys

Image from blog.debugme.eu

5 / 72

Modern Front End Developers

The roles before Front End

  • Web Developer
  • HTML / UI Developer
  • Web Designer
6 / 72

Modern Front End Developers

Web Developer

  • Proficient in one of server-side languages (PHP, .NET...)
  • Good at data & SQL
  • Can do basic HTML+CSS, jQuery
  • Very little skill with UI tools
  • Favorite OS & tools: Linux, Terminal, IntelliJ, Netbeans
Web Developer (Full Stack Developer)
HTML
CSS
JavaScript
UI Skills

100%

75%

50%

25%

7 / 72

Modern Front End Developers

HTML / UI Developer

  • Mostly CAN'T do server side
  • Proficient in HTML+CSS
  • Can do basic JS, jQuery
  • Good at slicing images with Photoshop
  • Favorite OS & tools: Windows, Photoshop, Notepad++, Dreamweaver
HTML / UI Developer
HTML
CSS
JavaScript
UI Skills

100%

75%

50%

25%

8 / 72

This is a position in compensate to Web developer, whose main task is to slicing and convert PSD files into static HTML layout

Modern Front End Developers

Web Designer

  • CAN'T do server side
  • Knows little HTML+CSS, JS, jQuery
  • Good at Photoshop and other Adobe tools
  • Can create new UI from scratch
  • Favorite OS & tools: macOS, Photoshop, Illustrator, Dreamweaver
Web Designer
HTML
CSS
JavaScript
UI Skills

100%

75%

50%

25%

9 / 72

Modern Front End Developers

That was 2000's

10 / 72

Modern Front End Developers

The causes of the rise of Front End

  • AJAX evolution (2005)
  • HTML5 & CSS3 evolution (2008)
  • Steve Job's Thought on Flash open letter (2010)
11 / 72

Modern Front End Developers

The causes of the rise of Front End

  • AJAX evolution (2005)
  • HTML5 & CSS3 evolution (2008)
  • Steve Job's Thought on Flash open letter (2010)

Flash history

Image by CommitStrip

11 / 72

https://en.wikipedia.org/wiki/Ajax_(programming) https://en.wikipedia.org/wiki/HTML5 http://www.apple.com/hotnews/thoughts-on-flash/

Modern Front End Developers

Front End Developer 😎

  • Can't do server side but very good at AJAX
  • Proficient in HTML+CSS
  • Proficient in JS, JS frameworks, SPA*
  • Can convert PSD to HTML, OK at UI tools
  • Favorite OS & tools: macOS, Photoshop, SublimeText, Webstorm
Front End Developer
HTML
CSS
JavaScript
UI Skills

100%

75%

50%

25%

  • Single Page Application
12 / 72

Modern Front End Developers

Honorably mentioned:

Which full-stack dev

  • Back End developers
  • Full-stack developers
  • JavaScript developers
  • NodeJS developers

Image by CommitStrip

13 / 72

The baseline skill set of a modern Front End developer

Front End Baseline cloudtag

14 / 72

The baseline skill set of a modern Front End developer

  • Web Front End Principles
  • The languages
    • HTML
    • CSS
    • JS
    • "UI Language"
  • Tooling skills
  • Workflow
15 / 72

Based on my baseline for Front End developer article, but with some 2017 updates.

Front End Baseline

The 80/20 Rule* in learning
Front End

AKA. Pareto principle, the law of the vital few

16 / 72

Front End Baseline

The 80/20 Rule* in learning
Front End

AKA. Pareto principle, the law of the vital few

  • 80% of daily work comes from 20% of the F.E. knowledge
16 / 72

Front End Baseline

The 80/20 Rule* in learning
Front End

AKA. Pareto principle, the law of the vital few

  • 80% of daily work comes from 20% of the F.E. knowledge
  • 80% of new JS frameworks can be understood well with 20% of JS basic knowledge
  • ...
16 / 72

Front End Baseline

The article that goes viral

How it feels to learn JavaScript in 2016

Vietnamese version here

17 / 72

Front End Baseline

Among the sea of keywords...

AJAX AMD Angular Atom await Axios Babel Bluebird Bower Broccoli Browserify Browsersync callback Chrome class closure CommonJS devtools DotJS DustJS ECMAScript 6 EJS Ember Emmet ES2016 eslint Fetch Firefox FlowType Flummox Flux Functional programming generator Grunt Gulp Handlebars High order functions hoisting HTML HTTP/2 Internet Explorer Jade Jade Jasmine JavaScript Jest jQote jQuery jQuery-tmpl JSRender JSX jTemplates KnockoutJS literals live-reload live-server lodash Makefiles MarkupJS Mimosa Mocha ES6 Module MS Edge Mustache MVC NextJS NodeJS npm Nunjucks Opera Phonegap PlatesJS polyfill Preact Progressive Enhancement Promise Prototypal inheritance Pug PURE Pure functions Ramnda React React DOM Redux Request REST RxJS Safari Sublime Text SystemJS this Transparency Typescript underscore variables VSCode VueJS Webpack Webstorm XMLHttpRequests

18 / 72

Front End Baseline

You just need to focus on these:

AJAX AMD Angular Atom await Axios Babel Bluebird Bower Broccoli Browserify Browsersync callback Chrome class closure CommonJS devtools DotJS DustJS ECMAScript 6 EJS Ember Emmet ES2016 eslint Fetch Firefox FlowType Flummox Flux Functional programming generator Grunt Gulp Handlebars High order functions hoisting HTML HTTP/2 Internet Explorer Jade Jade Jasmine JavaScript Jest jQote jQuery jQuery-tmpl JSRender JSX jTemplates KnockoutJS literals live-reload live-server lodash Makefiles MarkupJS Mimosa Mocha ES6 Module MS Edge Mustache MVC NextJS NodeJS npm Nunjucks Opera Phonegap PlatesJS polyfill Preact Progressive Enhancement Promise Prototypal inheritance Pug PURE Pure functions Ramnda React React DOM Redux Request REST RxJS Safari Sublime Text SystemJS this Transparency Typescript underscore variables VSCode VueJS Webpack Webstorm XMLHttpRequests

19 / 72

Front End Baseline

Web Front End Principles

20 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

21 / 72

Explain a bit about PE

Front End Baseline > Web Front End Principles

Progressive Enhancement

22 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

23 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

24 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

25 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

26 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

27 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

28 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

29 / 72

Front End Baseline > Web Front End Principles

Progressive Enhancement

30 / 72

Front End Baseline > Web Front End Principles

Mobile First

31 / 72

Front End Baseline > Web Front End Principles

Mobile First

Internet users on mobile* exceed ones on desktop since 2014

mobile vs desktop user

*include internet mobile apps

32 / 72

Front End Baseline > Web Front End Principles

Mobile First

Website visitors on mobile exceed ones on desktop 12/2016

mobile vs desktop website visitor

Source: Statecounter

33 / 72

Front End Baseline > Web Front End Principles

Mobile First

  • Responsive web design
  • CSS media query approach (max-width -> min-width)
  • Touch friendly UI
  • Load fast (less than 1s is ideal)
34 / 72

Front End Baseline > Web Front End Principles

User Experience > Developer Experience

35 / 72

Front End Baseline > Web Front End Principles

User Experience > Developer Experience

Example:

  • Client side validation
  • Transition and functional animations
  • Server-side rendering
  • ...
36 / 72

Example for transition:

  • pseudo class :hover :active

Front End Baseline > Web Front End Principles

User Experience > Developer Experience

Demo by Sarah Drasner

37 / 72

Front End Baseline

The Languages

38 / 72

Front End Baseline > Languages

HTML

39 / 72

Front End Baseline > Languages

HTML

  • Understanding of document flow:
    • Rendering order
    • inline vs. block
39 / 72

Front End Baseline > Languages

HTML

  • Understanding of document flow:
    • Rendering order
    • inline vs. block
  • HTML elements default style know-how
39 / 72

Front End Baseline > Languages

HTML

  • Understanding of document flow:
    • Rendering order
    • inline vs. block
  • HTML elements default style know-how
  • HTML Form and Input
39 / 72

Front End Baseline > Languages

HTML

  • Understanding of document flow:
    • Rendering order
    • inline vs. block
  • HTML elements default style know-how
  • HTML Form and Input
  • Semantic HTML
39 / 72

Front End Baseline > Languages

Example:

Source HTML5Doctor

40 / 72

Front End Baseline > Languages

CSS

41 / 72

Front End Baseline > Languages

CSS

  • Cascading rules
41 / 72

Front End Baseline > Languages

CSS

  • Cascading rules
  • Selectors and specificity
41 / 72

Front End Baseline > Languages

CSS

  • Cascading rules
  • Selectors and specificity
  • The box model
41 / 72

Front End Baseline > Languages

CSS

  • Cascading rules
  • Selectors and specificity
  • The box model
  • Stacking context
41 / 72

Front End Baseline > Languages

E.g: Specificity War

Source stuffandnonsense.co.uk

42 / 72

Front End Baseline > Languages

JavaScript

  • Dynamic typing
43 / 72

Front End Baseline > Languages

JavaScript

  • Dynamic typing
  • Function scope and Closure
43 / 72

Front End Baseline > Languages

JavaScript

  • Dynamic typing
  • Function scope and Closure
  • Prototypal inheritance
43 / 72

Front End Baseline > Languages

JavaScript

  • Dynamic typing
  • Function scope and Closure
  • Prototypal inheritance
  • Object literals ({}, [])
43 / 72

Front End Baseline > Languages

E.g: JS Equality Table

JS Equality Table

Source dorey.github.io

44 / 72

Front End Baseline > Languages

UI Language

  • Speak designer jargons
  • Understand typography
  • Understand color mixing
  • Understand image formats and image optimization
45 / 72

Jargons: hamburger button, hero banner, above the fold, parallax Typography: sans vs. sans-serif fonts, base line,

Front End Baseline

Tooling skills

46 / 72

Front End Baseline > Tooling

Tooling skills

  • Code Editor:
    • Multi-cursor
    • Autocompletion
    • Live code linting
    • Fuzzy file search
    • Emmet
47 / 72

Front End Baseline > Tooling

Tooling skills

  • Code Editor:
    • Multi-cursor
    • Autocompletion
    • Live code linting
    • Fuzzy file search
    • Emmet

Visual Studio Code
47 / 72

Front End Baseline > Tooling

Tooling skills

  • Browser Devtool: Chrome Devtool
48 / 72

Front End Baseline > Tooling

Tooling skills

  • Browser Devtool: Chrome Devtool
  • Terminal / command line
    • NodeJS
    • npm
    • live-server
48 / 72

Front End Baseline > Tooling

Tooling skills

  • Browser Devtool: Chrome Devtool
  • Terminal / command line
    • NodeJS
    • npm
    • live-server
  • Git tool: SourceTree, CLI
48 / 72

Front End Baseline > Tooling

Tooling skills

  • Browser Devtool: Chrome Devtool
  • Terminal / command line
    • NodeJS
    • npm
    • live-server
  • Git tool: SourceTree, CLI
  • Photoshop
48 / 72

Front End Baseline > Tooling

Tooling skills

  • Browser Devtool: Chrome Devtool
  • Terminal / command line
    • NodeJS
    • npm
    • live-server
  • Git tool: SourceTree, CLI
  • Photoshop
  • Illustrator
48 / 72

Front End Baseline > Tooling

Tooling skills

  • Browser Devtool: Chrome Devtool
  • Terminal / command line
    • NodeJS
    • npm
    • live-server
  • Git tool: SourceTree, CLI
  • Photoshop
  • Illustrator
  • Sketch app (macOS only)
48 / 72

Front End Baseline > Tooling

SketchApp Export demo:

49 / 72

Front End Baseline

Workflow

"All code in any code-base should look like a single person typed it, no matter how many people contributed." - from Idiomatic.js

50 / 72

Front End Baseline

Workflow

"All code in any code-base should look like a single person typed it, no matter how many people contributed." - from Idiomatic.js

  • Adopt a code style: Google, AirBnb, Nau, your own
  • dotfiles
  • webpack: file bundler and loader
  • Automation:
    • gulp
    • npm scripts + bash scripts
  • Gitflow: source control workflow
50 / 72

Roadmap to Senior Front End Developer

Code ninja

Image source map2app

51 / 72

Roadmap to Senior Front End Developer

1) Learn the baseline

52 / 72

Roadmap to Senior Front End Developer

1) Learn the baseline

2) Learn the modular approaches of JS

52 / 72

Roadmap to Senior Front End Developer

1) Learn the baseline

2) Learn the modular approaches of JS

3) Learn JS frameworks

52 / 72

Roadmap to Senior Front End Developer

1) Learn the baseline

2) Learn the modular approaches of JS

3) Learn JS frameworks

4) Learn how to optimize Front End

52 / 72

Roadmap to Senior Front End Developer

1) Learn the baseline

2) Learn the modular approaches of JS

3) Learn JS frameworks

4) Learn how to optimize Front End

5) Learn how to unit test

52 / 72

Roadmap to Senior Front End Developer

1) Learn the baseline

2) Learn the modular approaches of JS

3) Learn JS frameworks

4) Learn how to optimize Front End

5) Learn how to unit test

6) Learn how to write your own workflow and conventions

52 / 72

Roadmap to Senior Front End Developer

7) Learn how to profile and debug performance issues

53 / 72

Roadmap to Senior Front End Developer

7) Learn how to profile and debug performance issues

8) Learn CSS architecture and methodology

53 / 72

Roadmap to Senior Front End Developer

7) Learn how to profile and debug performance issues

8) Learn CSS architecture and methodology

9) Learn full Front End project architect

53 / 72

Roadmap to Senior Front End Developer

7) Learn how to profile and debug performance issues

8) Learn CSS architecture and methodology

9) Learn full Front End project architect

10) Learn hybrid mobile app

53 / 72

Roadmap to Senior Front End Developer

7) Learn how to profile and debug performance issues

8) Learn CSS architecture and methodology

9) Learn full Front End project architect

10) Learn hybrid mobile app

11) Learn NodeJS

53 / 72

Roadmap to Senior Front End Developer

7) Learn how to profile and debug performance issues

8) Learn CSS architecture and methodology

9) Learn full Front End project architect

10) Learn hybrid mobile app

11) Learn NodeJS

12) Learn back-end JS

...

53 / 72

How to get started and improve as a Front End developer by yourself

54 / 72

How to get started and improve as a Front End developer by yourself

  • Take English courses
54 / 72

How to get started and improve as a Front End developer by yourself

  • Take English courses
  • Take online lessons: codecademy, egghead, youtube (Nau channel)
54 / 72

How to get started and improve as a Front End developer by yourself

  • Take English courses
  • Take online lessons: codecademy, egghead, youtube (Nau channel)
  • Do a side project or a demo to reinforce what you learned
54 / 72

How to get started and improve as a Front End developer by yourself

  • Take English courses
  • Take online lessons: codecademy, egghead, youtube (Nau channel)
  • Do a side project or a demo to reinforce what you learned
  • Pick and read a book about JavaScript, recommended:
54 / 72

How to get started and improve as a Front End developer by yourself

55 / 72

How to get started and improve as a Front End developer by yourself

Follow KOL on Twitters

56 / 72

How to get started and improve as a Front End developer by yourself

Follow KOL on Twitters (contd.)

57 / 72

How to get started and improve as a Front End developer by yourself

Follow KOL on Twitters (contd.)

...

58 / 72

The chicken & egg paradox of Front End learning

59 / 72

The chicken & egg paradox of Front End learning

  • The egg: You start learning Front End and JS from the basics
  • The chicken: You start learning JS Frameworks and work on real projects
59 / 72

There is an emerging paradox with Front End learning: Can we start doing Front End out right with frameworks like Angular or ReactJS, or must you learn the basics from JavaScript & Front End basics first?

Example: ReactJS

ReactJS prerequisites:

  • AJAX
  • Babel
  • CLI
  • Closure
  • ES6
  • ES6 Promises
  • Express (with backend) / Firebase (backend-less)
  • Flux and Redux
  • Git
  • JavaScript
  • JSX
  • Mobile first & responsive
  • MongoDB / MySQL / insert your DBMS
  • Node.js
  • NPM
  • Post.css / Autoprefixer
  • SASS / CSS
  • Stripe / Paypal (online payment)
  • Webpack
60 / 72

Example: ReactJS

What happen if you start learning React / React Native without the basics?

61 / 72

Example: ReactJS

What happen if you start learning React / React Native without the basics?

62 / 72

Give another example about Angular candidate

A proposal:

  • It's fine if you start learning and doing JS frameworks
  • You should have a mentor / leader to guide and help explain uncertainties
  • You keep learning the basics
  • Join the technical groups on FB, forums
  • Go to technical sharing talks
63 / 72

Front End Trend 2017

64 / 72

Front End Trend 2017

Universal JavaScript Applications

  • Single Page Application
  • Server side rendering
  • History push state
  • Server side JavaScript

(Demo with Kuadobox)

65 / 72

Front End Trend 2017

Functional programming with JS

  • ES6 new core objects methods. Example: Array.prototype.map()
  • REDUX & Reducers
  • Immutables & pure functions
  • lodash's FP module
66 / 72

Front End Trend 2017

Declarative programming*

  • Virtual DOM (React, Vue, Preact)
  • Reactive programming (RxJS, Angular 2)
  • GraphQL (Relay, GraphQL Express)

vs. Imperative programming

67 / 72

Front End Trend 2017

Unidirectional data flow architecture*

  • Success of Flux and it's implementations
  • Redux
  • MobX

*in contrast with MVC architecture on Front End

68 / 72

Front End Trend 2017

Progressive Web App

  • Service worker
  • Web Push Notification
  • Webapp's manifest.json
  • Web IndexDB
  • Web Payment API
  • Web Authentication API
69 / 72

Front End Trend 2017

RAIL performance model

70 / 72

Front End Trend 2017

RAIL performance model

Source: SmashingMagazine

70 / 72

Questions & Answers

71 / 72

Thanks

The End

This talk slides: bit.ly/codecamp-fe2017

72 / 72

Secrets of a

Front End Ninja*

2017 Edition

Image by Thăngfly

2 / 72
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow