まだ DOM 操作で消耗してるの？ / ngineerxiv #3

Transcript

1. ·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ 2015.06.06 (͍͍ͩͨ)৽ଔΤϯδχΞ޲͚ٕज़ަྲྀձ vol.3

2. None

3. 

4. ͜Μ͹Μ͸ hoge17296 Ͱ͢ʂʂʂʂʂ

5. hoto
 17296

6. ͱ͏ͱ͏ϓϩάϥϚྺ
 10 ೥໨ʹಥೖ

7. None

8. ͦΕͰ΋ 10 ೥Ͱ ͍Ζ͍Ζͳ΋ͷΛݟ͖ͯͨ

9. ΫϥΠΞϯταΠυ JS ۙ୅࢙

10. ʙ 2004 ೥ • JS ͸ʮ Web ʹͪΐͬͱಈ͖ΛՃ͑Δ΋ͷʯ • ʮJS͕ಈ͔ͳ͍؀ڥͷ͜ͱ΋


    ɹߟ͑ͳ͖ΌμϝͰ͠ΐʂʂʂʯ • Ϧονͳ͜ͱ͸ Flash Ͱ΍Ε
11. None
12. None
13. None

14. Flash ԫۚ࣌୅

15. ਓੜͷઈ௖

16. 2005 ೥

17. None

18. Ajax ͷ஀ੜ • ࣮͸ੲ͔Β͚͋ͬͨͲ஌ΒΕ͍ͯͳ͔ͬͨ
 XMLHttpRequest ͕ Google Maps ʹΑͬͯ
 ࠶ൃݟ͞ΕͯҰ༂༗໊ʹ

    • Ajax (Asynchronous JavaScript + XML) ͱ͍͏
 ݴ༿͕ੜ·ΕΔ • ͔͠͠·ͩ·ͩෑډ͕ߴ͍

19. 2006 ೥

20. None

21. jQuery ͷিܸ • ΫϥΠΞϯταΠυϓϩάϥϛϯάͷෑډΛ
 ѹ౗తʹԼ͛ͨ • DOM ૢ࡞ • Πϕϯτॲཧ

    • Ϋϩεϒϥ΢β • Ajax

22. $()

23. ͋·͍͋·͍ γϯλοΫε γϡΨʔ

24. jQuery ৬ਓ͕ࣾձ໰୊ʹ ʮ͜ΕάʔάϧΈ͍ͨʹ
 ɹΪϡΠʔϯͬͯײ͡Ͱ
 ɹͰ͖ΔΑͶʁʯ

25. None

26. ...ͱ͸ݴ͑ͳ͍ • ͳ·͡ jQuery ͕͋Ε͹ͦͦ͜͜ग़དྷͯ͠·͏ • ͪΐͬͱάάΕ͹ϓϥάΠϯ͕མͪͯΔ • ग़དྷΔΑ͏ͳؾ͕ͯ͠͠·͏ •

    ʮग़དྷͯ౰ͨΓલʯͱͯ͠ཁٻ͞ΕΔ

27. ͳʹ͕ͭΒ͍͔

28. ͢΂ͯͷ DOM ͷঢ়ଶ؅ཧ • Ͳͷ DOM ͕ࠓͲΜͳ஋Λ͍࣋ͬͯΔ͔ • Ͳͷ DOM

    ͔ΒԿͷΠϕϯτ͕ൃՐ͢Δ͔ • ͜ͷ஋͕มΘͬͨΒͲͷ DOM Λ
 ॻ͖׵͑ͳ͍ͱ͍͚ͳ͍͔

29. ίϯϙʔωϯτ͕૿͑Δͨͼ ߟ͑Δ΂͖͜ͱ͕ ࢦ਺ؔ਺తʹ૿͍͑ͯ͘ ϓϩάϥϛϯά

30. Ұ෦ͷ༏Εͨ৬ਓʹ͔͠ ੒͠ಘͳ͍௒ઈٕ޼

31. ͦͯ͠ 2010 ೥

32. Single Page Application

33. Single Page Application • HTML5 ͷ history.pushState ʹΑͬͯ
 URL ͷಈతॻ͖׵͕͑Մೳʹ

    • ϖʔδભҠͱ͍͏֓೦Λ௒ӽͨ͠
 ΫϥΠΞϯταΠυϓϩάϥϛϯάͷۃ஍

34. ྫ ʮSPAͰ࡞ͬͯͶʂʂʂʯ ʮͰ΋ history.back ͯ͠΋લͷϏϡʔͷ
 ɹεΫϩʔϧҐஔอ࣋ͯ͠Δͷ౰વͩ͠
 ɹ৘ใ΋ߋ৽͞ΕͯΔΑͶʂʂʂʯ

35. ΋͸΍ ਓؒۀͰ͸ͳ͍

36. ͜Μͳ΋ͷ͕ ”౰ͨΓલ”ͱͯ͠ ཁٻ͞ΕΔੈͷத͸ ઈରʹؒҧ͍ͬͯΔ

37. Զ͸ ΋͏

38. 2014 ೥

39. None

40. React • Facebook ੡ͷ UI ϥΠϒϥϦ • ϑϨʔϜϫʔΫ͡Όͳ͍ • ಛ௃

    • ϦΞΫςΟϒϓϩάϥϛϯά • Virtual DOM

41. ΋͏ DOM ૢ࡞͠ͳ͍͍ͯ͘ • มߋ͕͋ͬͨΒ HTML શମΛॻ͖׵͑Δ • ৗʹ࠷৽ͷঢ়ଶͷ DOM

    Λ
 ϨϯμϦϯά͠ଓ͚Ε͹͍͍͚ͩ • React ͕಺෦Ͱ diff / patch ͯ͘͠ΕΔ͔Β
 ஗͘ͳ͍

42. DEMO http://bit.ly/mtg_timer

43. ʮࣄ͋Δຖʹ࠷৽ͷ HTML Λ
 ϨϯμϦϯά͢Δʯ ʁʁʁ

44. ͜ΕͬͯੲϖʔδભҠͰ ΍͍ͬͯͨ͜ͱ͡Όͳ͍͔

45. γϯϓϧͰݹ͍ ͜ͷ֓೦ͦ͜ ਖ਼͔ͬͨ͠

46. ΅ͨͪ͘͸ ͪΐͬͱ࿪ΜͰ͍ͨ ͚ͩͩͬͨΜͩ

47. ·ͱΊ • ΅ͨͪ͘͸ DOM ૢ࡞ͱ͍͏
 ۤ௧Λڧ͍ΒΕ͍ͯΔ • ຑༀ (jQuery) ʹΑΔର঱ྍ๏΋ݶք͕དྷ͍ͯΔ

    • React ʹΑͬͯ΅ͨͪ͘͸ղ์͞ΕΔ

48. ָ͔ͬͨ͋͠ͷࠒʹ໭Ζ͏

49. None

50. ·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ