Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript - From DHTML to a Multi-Paradigm Lan...
Search
Robert Vogt
September 23, 2016
Technology
0
420
JavaScript - From DHTML to a Multi-Paradigm Language
Robert Vogt
September 23, 2016
Tweet
Share
More Decks by Robert Vogt
See All by Robert Vogt
React Native — Webnesday #9
deniaz
1
420
Hands On: React Native
deniaz
0
380
ADR Lightning Talk
deniaz
0
410
Other Decks in Technology
See All in Technology
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
140
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
capytan
6
2.7k
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
120
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
2
180
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
210
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
tatsukoni
0
210
Agile Leadership Summit Keynote 2026
m_seki
1
580
配列に見る bash と zsh の違い
kazzpapa3
1
140
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
n11sh1
0
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
42k
Amazon Bedrock Knowledge Basesチャンキング解説!
aoinoguchi
0
130
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
msysh
3
170
Featured
See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.3k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
410
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Six Lessons from altMBA
skipperchong
29
4.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Designing for humans not robots
tammielis
254
26k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
700
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Transcript
JavaScript From DHTML to a Multi-Paradigm Language Robert Vogt #NCamp16
Robert Vogt Software Engineer from & in Sankt Gallen @_deniaz
None
«Web 2.0 describes World Wide Web websites that emphasize user-generated
content, usability, and interoperability for end users.»
jQuery MooTools Prototype JS script.aculo.us
Single-page application
Angular React Object-Oriented Functional
None
JavaScript
«A programming paradigm is a style or way of programming.
Some languages make it easy to write in some paradigms but not others.»
«Object-oriented programming is a programming language model organized around objects
rather than actions and data rather than logic.»
class Dog extends Animal {} let dog = new Dog();
dog.walk();
let Animal = { walk: function() {} }; let Dog
= Object.create(Animal); Dog.bark = function() { return ‘Woof!’; };
Class-based Inheritance Prototypical Inheritance
«Functional Programming is a programming paradigm that treats computation as
the evaluation of mathematical functions and avoids changing-state and mutable data.»
Functions First-Class
let sum = function(a, b) { return a + b;
}
Functions Higher-Order
$.get( 'http://example.com', (data) => { /* Success! */ } );
function createPrinter(a, b) { return function() { return ‘Namics’; }
} const print = createPrinter(); print(); // Namics.
Functions Pure
let double = (x) = x * 2;
Closures Function
let incrementer = (function() { let _value = 0; return
() => ++_value; })(); incrementer(); // 1 incrementer(); // 2 incrementer(); // 3
Data Immutable
const list1 = Immutable.List.of(1, 2); const list2 = list1.push(3, 4,
5);
Composition Function
let ten = double(sum(2, 3));
Soooo… Any Real World Examples?
None
Store View Action Action Dispatcher
const HelloMessage = (props) => ( <div>Hello {props.name}</div> );
«Those who are unaware they are walking in darkness will
never seek light.» — Bruce Lee find me on twitter @_deniaz