Javascript all the things
Upcoming SlideShare
Loading in...5
×
 

Javascript all the things

on

  • 805 views

With upcoming controllers like Espruino and Tessel as well as new, programmable input devices (leap motion, ocolus rift) and their respective JS-APIs, javascript is steadily evolving and shifting into ...

With upcoming controllers like Espruino and Tessel as well as new, programmable input devices (leap motion, ocolus rift) and their respective JS-APIs, javascript is steadily evolving and shifting into the physical world.

Felix will give a short introduction about the current state of "javascript in the real world" and bring some ideas and stuff to play with.

Statistics

Views

Total Views
805
Views on SlideShare
803
Embed Views
2

Actions

Likes
0
Downloads
13
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript all the things Javascript all the things Presentation Transcript

  • JAVASCRIPT ALL THE THINGS #HANNOVERJS 11/2013 ! ! ! ! ! ! ! ! ! @FELIXWAHNER / @NEUWAERTS_DE !1
  • WHAT IS THIS TALK THIS ABOUT? • Javascript (obviously) • Things (literally) !2
  • WHAT IS THIS TALK THIS ABOUT? • Javascript • Frontend • Server • • Hardware Things • • Hardware Gadgets !3 View slide
  • WHAT IS THIS TALK THIS ABOUT? • Javascript • Frontend • Server • • Hardware Things • • Hardware Gadgets !4 View slide
  • WHAT IS THIS TALK THIS ABOUT? • Javascript • Frontend • Server • • Hardware Things • • Hardware Gadgets !5
  • WHAT IS THIS TALK THIS ABOUT? • Javascript • Frontend • Server • • Hardware Things • • Hardware Gadgets !6
  • WHAT IS THIS TALK THIS ABOUT? • Javascript • Frontend • Server • • Hardware Things • • Hardware Gadgets !7
  • LET ME INTRODUCE MYSELF !8
  • THAT’S ME • Felix Wahner • @felixwahner • 32 yrs old • Father, Designer, Frontend Developer, Fulltime Nerd • CTO @neuwaerts_de • blogs @ neuwaerts.de/emerge !9
  • 10
  • 11
  • 12
  • ALRIGHT: LET’S GO! !13
  • INTERNET OF THINGS A BRIEF INTRODUCTION • A connection of „Things“ (real world objects) with our beloved InternetsTM • Enriches all day life experience with Facebook like counters awesome metadata and functionality • Will hopefully make our lives a lot easier !14
  • RATHER OBVIOUS EXAMPLES Google Glass Image: http://www.aha-soft.com !15
  • NOT SO OBVIOUS EXAMPLES http://commons.wikimedia.org/wiki/File:Cow_female_black_white.jpg !16
  • NOT SO OBVIOUS EXAMPLES http://commons.wikimedia.org/wiki/File:Cow_female_black_white.jpg A street sign that adjusts its contents and directions based on user input: ! ! http://breakfastny.com/points/ Dutch Company „Sparked“ is using wireless sensors on cattle ! ! ! ! http://www.iotworks.com/#!sensors/c14wo !17 Dominic Wilcox has created a fully functional prototype pair of shoes that will guide the wearer to any destination ! ! ! http://dominicwilcox.com/portfolio/gpsshoe/
  • PROTOTYPING, PHYSICAL COMPUTING PLATFORMS AND THE MAKER MOVEMENT !18
  • IN THE BEGINNING THERE WAS ARDUINO • Created 2000 by Massimo Banzi • Open Source Hardware and Software • Extendable, Programmable http://arduino.cc/ !19
  • ! RASPBERRY PI • First version released in 2011 • credit-card-sized 
 single-board computer http://www.raspberrypi.org/ !20
  • ! ESPRUINO • 2013 (to be released) • JavaScript interpreter for 
 microcontrollers http://www.espruino.com/ !21
  • BONUS :) MAKEY MAKEY • An Invention Kit for Everyone • Turn everyday objects into 
 touchpads and combine them with 
 the internet http://www.makeymakey.com/ !22
  • BONUS :) MAKEY MAKEY http://www.makeymakey.com/ - Foto: http://www.flickr.com/photos/raster/8605560001/ !23
  • MORE INTERESTING DEVICES I BROUGHT SOME WITH ME FEEL FREE TO TRY THEM RIGHT HERE. !24
  • ! LEAP MOTION • Motion Sensing Device • Browse the web, read articles, 
 flip through photos, and play 
 music just by lifting a finger • API & App ecosystem https://www.leapmotion.com/ && https://developer.leapmotion.com/ !25
  • ! SPHERO • It's the world's first robotic ball 
 that you control with a tilt, touch, 
 or swing from your smartphone 
 or tablet • API and SDK www.gosphero.com && https://developer.gosphero.com/ !26
  • ! OCULUS RIFT • virtual reality head-mounted display • API and SDK http://www.oculusvr.com/ && https://developer.oculusvr.com/ !27
  • … !28
  • AND MANY MORE! !29
  • NOTICED SOMETHING? ALL THESE THINGS ARE EITHER PROGRAMMABLE OR HAVE AN API !30
  • NOTICED SOMETHING? ALL THESE THINGS ARE EITHER PROGRAMMABLE OR HAVE AN API !31
  • SO LETS TALK ABOUT ALL THE THINGS! !32
  • SO LETS TALK ABOUT ALL THE THINGS! EXCEPT FOR THE COWS. !33
  • SO LETS TALK ABOUT JAVASCRIPT ALL THE THINGS! ! ! ! … FINALLY! :) !34
  • ! WHY JAVASCRIPT? • Easy to learn • Asynchronous • Popular, great Community • Awesome because it’s not C. :) • The last one might depend on who you’re talking to !35
  • „Any application that can be written in JavaScript, will eventually be written in JavaScript“ –Jeff Atwood / The Principle of Least Power http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html !36
  • ! WHAT CAN BE DONE VIA JS? Build the Frontend (if needed) Build your Server/Services (i.e. with node.js) End to end communication (WebRTC) Hardware Read/Write (node-serialport) !37
  • ! WHAT CAN BE DONE VIA JS? Build the Frontend (if needed) Build your Server/Services (i.e. with node.js) End to end communication (WebRTC) Hardware Read/Write (node-serialport) !38
  • EXAMPLES & LIBRARIES !39
  • ! NODUINO • A simple and flexible JavaScript 
 and Node.js Framework for accessing 
 basic Arduino controls from 
 Web Applications using HTML5, 
 Socket.IO and Node.js. http://semu.github.io/noduino/ !40
  • ! NODUINO var Noduino = new NoduinoObj({debug: true, host: 'http:// localhost:8090'}, Connector); Noduino.connect(function(err, board) { if (err) { return console.log(err); } board.withButton({pin: 13}, function(err, Button) { if (err) { return console.log(err); } Button.on('push', function() } console.log('Button pushed'); }); Button.push(); }); }); http://semu.github.io/noduino/ !41
  • ! JOHNNY FIVE • Johnny-Five is an Open Source, 
 JavaScript Arduino programming 
 framework • developed at Bocoup (yup: these 
 guys that contribute to almost all 
 major JS projects). https://github.com/rwaldron/johnny-five && http://bocoup.com/ !42
  • JOYSTICK CONTROLLED LASER JOHNNY FIVE var five = require("../lib/johnny-five.js"), board = five.Board({ debug: true }); board.on("ready", function() { var range, pan, tilt, joystick; range = [ 0, 170 ]; // Servo to control panning pan = five.Servo({ pin: 9, range: range }); // Servo to control tilt tilt = five.Servo({ pin: 10, range: range }); // Joystick to control pan/tilt // Read Analog 0, 1 // Limit events to every 100ms joystick = five.Joystick({ pins: [ "A0", "A1" ], freq: 100 }); // Center all servos (five.Servos()).center(); joystick.on("axismove", function() { tilt.move( Math.ceil(170 * this.fixed.y) ); pan.move( Math.ceil(170 * this.fixed.x) ); }); http://jsfiddle.net/rwaldron/YHb7A/show/light/ !43
  • ! NODE AR-DRONE • An implementation of the 
 networking 
 protocols used by the Parrot 
 AR Drone 2.0. https://github.com/felixge/node-ar-drone !44
  • ! ! NODE AR-DRONE var arDrone = require('ar-drone'); var client = arDrone.createClient(); ! client.takeoff(); ! client .after(5000, function() { this.clockwise(0.5); }) .after(3000, function() { this.stop(); this.land(); }); http://semu.github.io/noduino/ !45
  • ! NODE AR-DRONE: NODECOPTER • „There’s a meet up for that!“ • http://nodecopter.com/ • @nodeCopter https://github.com/felixge/node-ar-drone !46
  • OK, THIS WAS QUITE A LOT OF GEEKY GADGET STUFF. BUT HOW DOES THIS FIT INTO MY BUSINESS MODEL? !47
  • BRITISH AIRWAYS BILLBOARD CAMPAIGN • Combines IoT with Classic Campaign • Get’s a lot of „buzz“ • Would be easy to implement with JS: • Flights API • Kinect (node-kinect ) • Some very expensive large screen :) http://mashable.com/2013/11/25/british-airways-billboard/ && https://github.com/pgte/node-kinect !48
  • C&A FASHION LIKE • Shows 'Likes' on their respective
 Clothing Racks • Combines IoT with Classic Campaign • Get’s a lot of „buzz“ • Would be easy to implement with JS: • Facebook Graph-API • Arduino Mini • Some very cheap small led screens :) http://infosthetics.com/archives/2012/05/ca_fashion_like_real-time_facebook_likes_shown_on_clothing_racks.html !49
  • HYPOTHESIS (TOUCH)SCREENS WILL DIE SOON !50
  • HYPOTHESIS THE INTERNET AND SENSORS WILL INFILTRATE EVERYTHING !51
  • HYPOTHESIS THERE WILL BE NEW, MORE INTUITIVE, MORE PRECISE INPUT AND OUTPUT DEVICES !52
  • ! A FUTURE VISION $("livingroom").bind( "motion", function() { $(this).find("lights").brightness("75%").dimAfter("120s"); }); http://www.voodootikigod.com/nodebots-the-rise-of-js-robotics/ !53
  • THANKS FOR LISTENING! NOW GO BUILD SOMETHING AWESOME BE SURE TO SHARE & TWEET US ABOUT IT! !54
  • QUESTIONS? FEEDBACK? DROP ME A LINE: @FELIXWAHNER ! …AND BE SURE TO VISIT OUR BLOG. THERE WILL BE MORE #IOT POSTS COMING SOON: HTTP://NEUWAERTS.DE/EMERGE !55