2016년 12월에 진행되었던 W3C HTML5 Conference 2016의 오후 트렉 (웹프레임워크)의 발표 자료입니다. BPNR의 김혁수 팀장님께서 ‘Vanila JS로 개발하기’란 주제로 Vanila JS에 대한 소개, Vanila JS와 jQuery의 비교, 그리고 활용사례로 발표를 진행하셨습니다.

1. Vanilla JS
2016.12

2. AGENDA
• Vanilla JS?
• Vanilla JS vs jQuery
• 활용사례

3. Vanilla JS?

5. VanillaJS === JavaScript

7. - not customized from their original form
- unexpecting, normal, plain
- standard, unpached
https://en.wikipedia.org/wiki/Vanilla_software

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

9. Vanilla JS vs jQuery

10. Selectors (ID)
// jQuery
$(‘#testid’);
// Vanilla JS
document.getElementById('testid');

11. Selectors (Class)
// jQuery
$(‘.testClass’);
// Vanilla JS
document. getElementsByClassName(‘.testClass');

12. Class manipulation
// jQuery
$('div').toggleClass('testClass');
// JavaScript
var div = document.querySelector('div');
div.classList.toggle('testClass');

13. Events
// jQuery
$(‘div’).on(‘click’, eventHandler);
// JavaScript
var div = document.querySelector('div');
div.addEventListener(‘click’, eventHandler);

14. Elements
http://vanilla-js.com/

15. AJAX Call
http://vanilla-js.com/

16. 성능은?

17. DOM access #1

18. DOM access #2

19. JavaScript web frameworks
benchmark

20. 활용사례

22. 적정기술에서 기술최적화

23. Framework 전성시대
"자바스크립트 전성시대 온다” - 2011년 3월 zdnet
http://redmonk.com/sogrady/2016/07/20/language-rankings-6-16/

24. JavaScript framework 2016

27. 튜닝의 끝은 순정?

28. ES6로 개발

29. ES6 개발환경 준비

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

31. 그 외, 소소한 몸집줄이기

32. 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

33. What features in ES6, ES7

34. Questions?

35. 감사합니다!
soo@bpnr.co.kr