2016 w3c conference #2 : vanila js로 개발하기
TRANSCRIPT
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?