20171221_we are_javascripters@14thで発表した内容です。 jqueryとかreactとかangularとか色々あると思いますが、state管理してviewにレンダリングしていくパターンと、jqueryでゴリゴリdom操作していく方、どちらを使えばいいかをまとめました

1. jquery? state ?
taskey

2. 1.
2. jquery state 1
3. jquery state 2
4.

3. 1.

4. We Are JavaScripters! :))

5. We Are JavaScripters! :))

6. <script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person",
"name": "Masakazu Fukami",
"job": "Frontend Vice President",
"twitter": "@fukamiiiiinmin",
"company": "Taskey.inc",
"favorites": [" ", “ ”, ” "]
}
</script>
※

7. SEO

8. / /

9. 2.jquery state

12. jquery? react?

13. Yama Hiro

14. state

15. SSR view
html

16. (view)
ul#wrap

17. Yama Hilo (view)

18. Yama Hilo (view)

19. Yama Hilo DB

20. Yama Hilo
(view)

21. Yama Hilo
(view)

22. Yama Hilo
(view)

23. state

24. data view

25. data view
toggleFriend()

26. view
data view

27. jquery

28. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

29. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

30. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓
DOM

31. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓
DOM
DOM

32. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓
DOM
DOM

33. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓
DOM
DOM

34. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓
DOM

35. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

36. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

37. state

38. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

39. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

40. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

41. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

42. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓

43. view

47. jquery
vue, knockout
react, angular
LP
animation
1 2-3
1
SPA

48. html
↓
↓
Yama Hiro
↓
↓
↓
↓
↓
↓
js

49. 1.
2.
3. SEO

50. Vue
jquery
vue, knockout
react, angular
LP
animation
1 2-3
1
SPA

51. 2018 JavaScripters

52. jquery? react?
taskey