JavaScriptFrom DHTML to aMulti-ParadigmLanguageRobert Vogt#NCamp16
View Slide
Robert VogtSoftware Engineerfrom & in Sankt Gallen@_deniaz
«Web 2.0 describes World Wide Web websites thatemphasize user-generated content, usability, andinteroperability for end users.»
jQuery MooTools Prototype JS script.aculo.us
Single-page application
AngularReactObject-OrientedFunctional
JavaScript
«A programming paradigm is a style or way ofprogramming. Some languages make it easy to write insome paradigms but not others.»
«Object-oriented programming is a programminglanguage model organized around objects rather thanactions 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-basedInheritancePrototypicalInheritance
«Functional Programming is a programmingparadigm that treats computation as the evaluation ofmathematical functions and avoids changing-state andmutable data.»
FunctionsFirst-Class
let sum = function(a, b) {return a + b;}
FunctionsHigher-Order
$.get('http://example.com',(data) => { /* Success! */ });
function createPrinter(a, b) {return function() {return ‘Namics’;}}const print = createPrinter();print(); // Namics.
FunctionsPure
let double = (x) = x * 2;
ClosuresFunction
let incrementer = (function() {let _value = 0;return () => ++_value;})();incrementer(); // 1incrementer(); // 2incrementer(); // 3
DataImmutable
const list1 = Immutable.List.of(1, 2);const list2 = list1.push(3, 4, 5);
CompositionFunction
let ten = double(sum(2, 3));
Soooo… AnyReal World Examples?
Store ViewActionAction Dispatcher
const HelloMessage = (props) => (Hello {props.name});
«Those who are unawarethey are walking in darknesswill never seek light.»— Bruce Leefind me on twitter@_deniaz