This document provides an introduction and history of Kasper Reijnders' experience with frontend development. It discusses the evolution of websites from plain HTML to using frameworks with MVC/MVVM patterns. It also covers tools like Gulp, Pug and Sass as well as quirks in JavaScript like type coercion and operator precedence.

1. edulink - 2017 - frontend
kasper reijnders

2. 01 introduction
02 history
03 frameworks
04 websites
05 webapps
06 quirks
today

3. introduction
Kasper Reijnders
○ frontend enthusiast
○ user centered design
○ 29 years
○ information studies @ university of amsterdam
○ vinyl lover

4. Experience

5. once upon a time

7. 1. web pages

8. 1. web pages
2. interaction

9. 1. web pages
2. interaction
3. user driven web

10. 1. web pages -> informative
2. interaction
3. user driven web

11. 1. web pages -> informative
2. interaction -> feedback
3. user driven web

12. 1. web pages -> informative
2. interaction -> feedback
3. user driven web -> social

13. 1. informative -> plain html
2. feedback
3. social

14. 1. informative -> plain html
2. feedback -> more styles, basic javascript
3. social

15. 1. informative -> plain html
2. feedback -> more styles, basic javascript
3. social -> javascript driven

19. chrome internet explorer
edge safari firefox uc android browser
opera android browser

20. global

21. kenya

22. netherlands

23. what does this mean?

24. frameworks

27. grunt gulp

31. websites

32. 1999
<button onclick="return someFunction()">

33. 2008
<button class="button">
<script>
$('.button').on('click', someFunction() {});
</script>

34. 2017
<button class="button">
<script>
document.querySelector('.button')
.addEventListener('click', someFunction() {});
</script>

35. splitted code

36. project: incentro.com

37. how do we work
● development in parts
● rules
● tools

38. development in parts

39. rules
CSS using BEM standards (block__element--modifier)
decide what is a component, element, etc
coding styles

40. tools
We deliver:
● Assets (css, js, images, fonts)
● Prototype
● Pattern library

41. tools
autoprefixer
pug
gulpESLint
sass

45. web applications

46. develop with a framework of your choice

47. mine
angular.io

48. model view controller (mvc)

49. model view viewmodel (mvvm)

50. project:
mistergreendirect.nl

52. think in components and modules

54. separate function

55. use development standards from the community

56. when working in a team all use the same coding styles
and
get an agreement on what is a component and what is not

57. quirks

58. when developing in javascript one should know
[] = Array()
JavaScript is not type safe
8 + "string" = "8string"

59. (5 == "5") = ?
(5 === "5") = ?

60. (5 == "5") = true
(5 === "5") = false

61. "string" + 9 = "string9"
"string" - 9 = ?

62. "string" + 9 = "string9"
"string" - 9 = NaN

63. [] + [] = ?

64. [] + [] = ""

65. [] + {} = ?

66. [] + {} = [object Object]

67. {} + [] = ?

68. {} + [] = 0

69. {} - {} = ?

70. {} - {} = NaN

71. {} - {} = NaN