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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
2
140
生成AI時代にこそ求められるSRE / SRE for Gen AI era
ymotongpoo
5
3.1k
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
riku_423
2
550
データ民主化のための LLM 活用状況と課題紹介(IVRy の場合)
wxyzzz
2
700
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
440
AWS Network Firewall Proxyを触ってみた
nagisa53
1
220
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
yuu551
0
210
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
350
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
abemii
0
130
Ruby版 JSXのRuxが気になる
sansantech
PRO
0
150
仕様書駆動AI開発の実践: Issue→Skill→PRテンプレで 再現性を作る
knishioka
2
640
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
msysh
3
170
Featured
See All Featured
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
160
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Automating Front-end Workflow
addyosmani
1371
200k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
99
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
92
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
300
Designing for humans not robots
tammielis
254
26k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
320
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
64
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