class: middle, center background-image: url(public/img/space1.jpg) ![picasso bulls](public/img/abstraction.jpg) --- class: middle, center # hi my name is @ag_dubs --- class: middle, center ![horse js](public/img/horse_js.png) --- class: middle, center ![horse horse](public/img/horsehorse.png) --- class: middle, center # hi my name is @ag_dubs --- class: middle, center ![dorito](public/img/dorito.png) --- class: middle, center # hi my name is @ag_dubs --- class: middle, center # 404 --- class: middle, center # i make mistakes --- class: middle, center ![dorito](public/img/dorito.png) --- class: middle, center # i make mistakes --- class: middle, center # let's talk about # cows in space --- class: middle, center ![cows in space](public/img/cows1.jpg) --- class: middle, center # let's talk about # art --- class: middle, center ![cows in space](public/img/cows3.png) ![cows in space](public/img/cows4.jpg) ![cows in space](public/img/cows5.jpg) ![cows in space](public/img/cows6.png) --- class: middle, center # let's talk about # javascript --- class: middle, center ![cows in space](public/img/cows2.jpg) --- class: middle, center # let's talk about # ES6/2015 --- class: middle, center ![cows in space](public/img/cows7.jpg) --- class: middle, center # let's talk about # ABSTRACTION --- class: middle, center background-image: url(public/img/space1.jpg) ![picasso bulls](public/img/abstraction.jpg) --- class: left, middle > The effective exploitation of his powers of > .highlight[abstraction] must be regarded as one of the > most vital activities of a competent programmer. ### Edsger W. Dijkstra ##### "The Humble Programmer" (1972) --- class: left, middle #### The Abstraction Principle > Each significant piece of functionality in a > program should be implemented in just one place > in the source code. Where similar functions are > carried out by distinct pieces of code, .highlight[it is] > .highlight[generally beneficial to combine them into one] > .highlight[by abstracting out the varying parts.] ### Benjamin C. Pierce ##### Pierce, Benjamin (2002). Types and Programming Languages. MIT Press. p. 339. ISBN 0-262-16209-1. --- class: left, middle > [Abstraction] tries to factor out details from > a common pattern so that programmers can work > close to the .highlight[level of human thought], leaving out > details which matter in practice, but are > .highlight[immaterial to the problem being solved]. ##### "Abstraction (computer science)", Wikipedia. http://en.wikipedia.org/wiki/Abstraction_(computer_science). Accessed 6 October 2014. --- class: middle, center # [I]mmaterial to the problem being solved. ![danger](public/img/danger.png) --- class: center, middle ![NYC web dev fellowship](public/img/flatironschool.jpg) # I teach beginners, and beginners teach me. --- class: left, middle # Iteration is hard. #### Ruby ```ruby array.each do |item| # do something end ``` #### Javascript ```javascript for(var i =0; i< array.length; i++){ // do something } ``` -- .javascript-cow[![cow in space](public/img/cows8.png)] --- class: top, left > Programs must be written for .highlight[people to read], > and only incidentally for machines to execute. ### Abelson and Sussman ![Abelson](public/img/abelson.jpg) ![Sussman](public/img/sussman.jpg) ##### Abelson and Sussman. "Structure and Interpretation of Computer Programs" MIT Press, Second ed. 1996. --- class: middle, center ![ups](public/img/obvious.jpg) --- class: left, middle # Iteration is hard. #### Ruby ```ruby array.each do |item| # do something end ``` #### Javascript ```javascript for(var i =0; i< array.length; i++){ // do something } ``` -- .ruby-cow[![cow in space](public/img/cows8.png)] --- class: middle, center ![feynman](public/img/feynman.jpg) --- class: middle, left > The real problem in speech is not precise > language. The problem is clear language ... > It is really quite impossible to say anything > with .highlight[absolute precision], unless that thing is > .highlight[so abstracted from the real world as to not] > .highlight[represent any real thing]. ### Richard Feynman ##### "New Textbooks for the "New" Mathematics", Engineering and Science volume 28, number 6 (March 1965) p. 9-15 at p. 14 --- class: center, middle ![picasso](public/img/picasso.jpg) --- class: middle, left > There is no abstract art. .highlight[You must always] > .highlight[start with something.] Afterward you can > remove all traces of reality. ### Pablo Picasso --- class: middle, center # Where should we begin? --- class: center, middle ![draw the owl](public/img/howtodraw.jpg) -- .js-helmet[![helmet](public/img/helmet.png)] -- .ruby-helmet[![helmet](public/img/helmet.png)] --- class: middle, center ![guns](public/img/guns.jpg) --- class: middle, center ![journey](public/img/journey.gif) --- class: middle, center # let's talk about # cows in space --- class: middle, center background-image: url(public/img/space1.jpg) ![picasso bulls](public/img/abstraction.jpg) --- class: middle, center ![taurus constellation](public/img/taurus2.jpg) ??? Humans are awesome pattern identifiers. --- class: middle, center ![taurus constellation](public/img/taurus1.jpg) --- class: middle, center ![taurus constellation](public/img/taurus.jpg) ??? Abstractions are patterns that we give names. --- class: middle, center ![horoscope](public/img/horoscope.png) ??? But we need to be careful about the patterns we pave. --- class: middle, center # let's talk about # javascript --- class: middle, center ![cows in space](public/img/cows2.jpg) --- class: middle, center # Javascript has been a delightful beginner programming language because it has lacked abstractions... --- class: middle, center ![explode](public/img/explode.gif) # That's all about to change. --- class: middle, center, title background-image: url(public/img/space1.jpg) # September 28, 1980 --- class: middle, center ![cosmos](public/img/cosmos.jpg) --- class: middle, left, title background-image: url(public/img/space1.jpg) # If you wish to make an apple pie from scratch, you must first invent the universe ### Carl Sagan --- class: left, middle, title background-image: url(public/img/space1.jpg) # If you wish to learn ES6/2015 from scratch you must first invent the universe ### Carl Sagan --- class: left, middle, title background-image: url(public/img/space1.jpg) # If you wish to learn ES6/2015 from scratch you must first invent the universe ### ag_dubs --- class: middle, center # let's talk about # ES6/2015 --- class: middle, center ![cows in space](public/img/cows7.jpg) --- class: middle, left > ECMAScript syntax is .highlight[relaxed] to enable it > to serve as an easy-to-use scripting language. ##### https://people.mozilla.org/~jorendorff/es6-draft.html. Accessed 12 May 2015. --- class: center, middle ![relax](public/img/relax.png) --- class: middle, center # [I]mmaterial to the problem being solved. ![danger](public/img/danger.png) --- class: middle, center # What is JavaScript trying to solve? --- class: middle, center # What will be JavaScript's legacy? --- class: middle, center ![javscript](public/img/voss_tweet.png) --- class: center, middle #### ECMASCRIPT6/2015 # Classes ![danger](public/img/danger.png) --- class: center, middle # Sugar # makes me # sick --- class: center, middle ![diabetepunk](public/img/diabetes.gif) --- class: center, middle # Syntactic Sugar # makes me # nervous --- class: top, left #### ECMASCRIPT6/2015: Classes > Even though ECMAScript includes syntax for > class definitions, .highlight[ECMAScript objects are not] > .highlight[fundamentally class-based] such as those in C++, > Smalltalk, or Java. ##### https://people.mozilla.org/~jorendorff/es6-draft.html. Accessed 12 May 2015. --- class: center, middle, title background-image: url(public/img/space1.jpg) # You might not need # class syntax --- class: center, middle, title background-image: url(public/img/space1.jpg) # You might not need # JQuery --- class: center, middle, title background-image: url(public/img/space1.jpg) # You might not need # class syntax --- class: middle, center ![gepbox](public/img/gepbox.jpg) --- class: middle, left > Remember that all models are wrong; the practical > question is .highlight[how wrong do they have to be to not be useful]. ### George E. P. Box ##### Box, G. E. P., and Draper, N. R., (1987), Empirical Model Building and Response Surfaces, John Wiley & Sons, New York, NY. p74. --- class: top, left #### ECMASCRIPT6/2015: Classes > In a class-based object-oriented language, in > general, state is carried by instances, methods > are carried by classes, and .highlight[inheritance is only] > .highlight[of structure and behaviour]. In ECMAScript, the > state and methods are carried by objects, while > .highlight[structure, behaviour, and state are all inherited]. ##### https://people.mozilla.org/~jorendorff/es6-draft.html. Accessed 12 May 2015. --- class: middle, center ![raganwald](public/img/raganwald.png) --- class: middle, center ![prototypes aren't classes](public/img/proto_homes.png) --- class: middle center #### Javascript Classes are Model Homes ![arrested dev](public/img/model.png) --- class: center, middle # Javascript classes are... objects -- # not classes. really. --- class: center, middle ![drunk](public/img/drunkface.png) .right[#### go home TC39, you're drunk] -- .tc39[![TC39](public/img/tc39.png)] -- .abstraction[abstraction] -- .no[![no](public/img/no.gif)] --- class: center, middle # This is NOT a hate talk --- class: center, middle # What even is a class? --- class: center, middle ![simula](public/img/simula.png) --- class: center, middle ![too many things](public/img/too_many.jpg) --- class: center, middle ![guidon](public/img/guidon.jpg) --- class: center, middle # .highlight[Teaching] is nature's way of letting you know .highlight[how sloppy your understanding is] --- class: left, top #### Teach Programming Concepts, Not Language Features ![SICP](public/img/sicp.jpg) --- class: middle, center # Javascript .highlight[WILL BE the introduction to programming concepts] for an entire generation of developers --- class: middle, center # [I]mmaterial to the problem being solved. ![danger](public/img/danger.png) --- class: middle, center ![Peter Van Roy](public/img/petervanroy.jpg) --- class: top, left #### Teach Programming as a Unified Discipline ![CTM](public/img/ctm.jpg) --- class: middle, center # Programming languages are tools --- class: middle,center # Problem-Solution Pairs => Paradigms --- class: left, top #### The Kernel Teaching Method > A good way to organize a programming course > is to start with a simple language and then > to .highlight[extend this language gradually]. ### Peter Van Roy ##### "Convergence in Language Design: A Case of Lightning Striking Four Times in the Same Place", FLOPS 2006, LNCS 3945, pp. 2-12, 2006. --- class: center, middle # We must invent the .highlight[Universe] --- class: center, middle # EVERY BEGINNER SHOULD WRITE A KERNAL LANGUAGE -- class: center .no[![no](public/img/no.gif)] --- class: middle, center # The Creative Extension Principle --- class: top, left #### You Aren't Going to Need It (YAGNI) > Always implement things when you .highlight[actually] > .highlight[need them], never when you just foresee > that you need them. ### Ron Jeffries, co-founder XP ##### Ron Jeffries. "You’re NOT gonna need it!". Practices. X Programming. Retrieved 2007-11-07. --- class: middle, center # .highlight[Prototypal inheritence] is a big part of the .highlight[JavaScript universe] --- class: middle, center # It's how the .highlight[apple pie] gets made -- ### #veganfriendlymetaphors --- class: middle, left # tl;dr - Abstraction: it's what programming is at it's most essential - Abstraction: beginners struggle with it - Abstraction: it will drive your culture and community - ES6 Classes: an abstraction, a problem - We should be teaching concepts not syntax - Syntax that obfuscates concepts is problematic - When we teach, we have to start at the beginning --- class: middle, center # What do .highlight[we even mean] when we talk about .highlight[programming]? --- class: middle, center ![heidegger](public/img/heidegger.jpg) ![what is called thinking](public/img/whatisthinking.jpg) --- class: middle, left > The most thought-provoking thing in our > thought-provoking time is that .highlight[we are] > .highlight[still not thinking.] ### Martin Heidegger ##### What is Called Thinking? [Was heisst Denken?] (1951–1952), as translated by Fred D. Wieck and J. Glenn Gray (1968) --- class: middle, center # Are we .highlight[programming] yet? --- class: middle, center ![racket](public/img/racket.png) ![pyret](public/img/pyret.png) --- class: middle, center ![scratch](public/img/scratch.jpg) --- class: middle, center ![kuhn](public/img/kuhn.jpg) --- class: middle, left > Scientists work from models acquired through > education and through subsequent exposure to > the literature often .highlight[without quite knowing or] > .highlight[needing to know what characteristics have] > .highlight[given these models the status of community] > .highlight[paradigms.] ### Thomas Kuhn ##### Kuhn, Thomas. "The Structure of Scientific Revolutions", pg 46 (1962) --- class: middle, left # We have an awesome opportunity to think .highlight[more radically] about how we extend JavaScript --- class: middle, left > It is far better to grasp the universe as it > really is .highlight[than to persist in delusion], however > satisfying and reassuring. ### Carl Sagan --- class: middle, left # Let's .highlight[reconsider] our .highlight[ontology]. -- # Let's reconsider it .highlight[early] and .highlight[often]. -- # Let's stay .highlight[beginners]. --- class: middle, center ![you're awesome](public/img/awesome.gif) ![you're awesome](public/img/awesome.gif) ![you're awesome](public/img/awesome.gif) ![you're awesome](public/img/awesome.gif) --- class: middle, center # #clapforashley ?