Vanilla JS2016.12

AGENDA

• Vanilla JS?

• Vanilla JS vs jQuery

• 활용사례

Vanilla JS?

VanillaJS === JavaScript

- not customized from their original form - unexpecting, normal, plain - standard, unpached

https://en.wikipedia.org/wiki/Vanilla_software

Documentation

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Vanilla JS vs jQuery

Selectors (ID)

// jQuery

$(‘#testid’);

// Vanilla JS

document.getElementById('testid');

Selectors (Class)

// jQuery

$(‘.testClass’);

// Vanilla JS

document. getElementsByClassName(‘.testClass');

Class manipulation

// jQuery

$('div').toggleClass('testClass');

// JavaScript

var div = document.querySelector('div');

div.classList.toggle('testClass');

Events

// jQuery

$(‘div’).on(‘click’, eventHandler);

// JavaScript

var div = document.querySelector('div');

div.addEventListener(‘click’, eventHandler);

Elements

http://vanilla-js.com/

AJAX Call

http://vanilla-js.com/

성능은?

DOM access #1

DOM access #2

JavaScript web frameworks benchmark

활용사례

적정기술에서 기술최적화

Framework 전성시대"자바스크립트 전성시대 온다” - 2011년 3월 zdnet

http://redmonk.com/sogrady/2016/07/20/language-rankings-6-16/

JavaScript framework 2016

튜닝의 끝은 순정?

ES6로 개발

ES6 개발환경 준비

그럼에도 분명 매력적인 Vanilla JS

그 외, 소소한 몸집줄이기

Custom Build

Exclude all ajax functionality: grunt custom:-ajax

Excluding css removes modules depending on CSS: effects, offset, dimensions. grunt custom:-css

Exclude a bunch of modules: grunt custom:-ajax,-css,-deprecated,-dimensions,-effects,-event/alias,-offset,-wrap

What features in ES6, ES7

Questions?

감사합니다!

soo@bpnr.co.kr