Skip to content

Files

Latest commit

HoverBaumHoverBaum
📚 add GitHub link on clsoing slide.
Feb 20, 2020
8bec6b2 · Feb 20, 2020

History

History
369 lines (233 loc) · 7.08 KB

deck.mdx

File metadata and controls

369 lines (233 loc) · 7.08 KB

import { Head, Notes } from 'mdx-deck'

import myTheme from './lib/theme' export const theme = myTheme

import CustomSplit from './lib/split.layout.js' import ImageSplit from './lib/imageSplit.layout.js' import Central from './lib/central.layout.js'

import Quote from './components/quote' import BackgroundImage from './components/background-image' import Legend from './components/legend' import Center from './components/center' import Counter from './components/counter' import LargeImage from './components/largeImage' import Impact from './components/impact' import Credit from './components/credit' import SlideHeadline from './components/slide-headline' import Portrait from './components/portrait' import OpeningSlide from './components/opening-slide' import Interlude from './components/interlude' import BackgroundBubbles from './components/background-bubbles' import TableCaption from './components/table-caption' import Wordcloud from './components/wordcloud' import ModeImage from './components/mode-image' import PrimaryColored from './components/primary-colored' import Website from './components/website/Website' import MfWebsite from './components/website/Mf-Website' import BetterMfWebsite from './components/website/Better-Mf-Website' import Boids from './components/boids/Boids' import ClosingSlide from './components/closing-slide'

import imgPotential from './img/potential.jpg' import imgHTML from './img/html.png' import imgCSS from './img/css.png' import imgJS from './img/js.png' import imgInternet from './img/internet.png' import imgRequest from './img/request.png' import imgNode from './img/node-logo.svg' import imgCreative from './img/creative.jpg' import imgPortrait from './img/portrait.jpg' import imgStateFrameworks from './img/state-js-19-frameworks.png' import imgPWA from './img/pwa.png'

<title>Webdevs history</title>

Speaker

Hendrik

JS Enthusiast 🤓

Developer for fun 🥳

Consultant from Netlight

<OpeningSlide title={ Past → Present → Future } />

  • Teaching ES generations
  • Building bridges
  • Reflecting my work

Simple documents

  • Fast forwarding to HTML.
  • 1969 First connected computers (Universities in US)
  • HTML around 90s.

Gained styling

I don't think we've even seen the tip of the iceberg. I think the potential of what the Internet is going to do to society both good and bad is unimaginable. I think we're on the cusp of something exhilarating and terrifying.

Technologies

HTML

  • The rock hard content
  • Semantic information about what is displayed

Technologies

CSS

  • The look and feel
  • Multiple posibilities for same content (cssZenGarden)
  • Cascading StyleSheets.
  • New ones overwrite previous rules - cascading.

Technologies

JavaScript

  • The interaction.
  • Do something when the user interacts with the page.
  • Famously developed in 10 days.
  • Today standardised as ECMAScript (ES).

"Slightly" simplified

Masively simplified

  • Enable fast user feedback.
  • Reduce load on server.
  • AJAX

The rise of JavaScript

  • Browsers have mixed support for features. (CanIUse.com)
  • jQuery was the first to conquer this.
  • Enabled writing larger programs.
  • jQuery: 2006
  • To this day many answers on StackOverflow asume you are using jQuery.

NodeJS

  • Introduced 2009
  • Enabled an echosystem to evolve around WebDev.

Make it one

  • Large apps became difficult to handle.
  • Package management rose (npm).
  • Bundling was introduced.
  • 2010 npm (pkg manager)
  • 2012 Bower (pkg for browser)
  • 2012 Grunt (task runner)
  • Hip framework of the month.
  • A lot of trying things out.
  • CSS pre-processing.

Need to know

  • HTML
  • CSS
  • JavaScript
  • CSS-Pre-processor
  • Package management
  • Bundler
  • Unidirectional Dataflow
  • Frameworks
  • (Type System)

Becoming boring

  • Big frameworks
  • ES modules
  • Webpack
  • Babel
  • SASS
  • JS is constantly evolving but backwards transpilable.
  • New CSS features.
  • Base technologies stayed the same.

Big players

  • React: The functional JavaScript rendering library
  • Angular: Good for Java Devs Framework with awesome docs

🔮

  • Progressive Web Apps (PWA)
  • WebComponents
  • Hybrid Apps
  • CSS in JS
  • All of these have been coming for years.
  • In order of looking nice on a slide.

Summary

  • Base technologies are not build for what we do.
  • Amazing tooling supports modern webdevs.
  • Things are now changing slowly.
  • The future is exciting.
  • Webdev is fun.