javascript all the things

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

WHAT IS THIS TALK THIS ABOUT?• Javascript

• Frontend• Server

• Hardware

• Things

• Hardware• Gadgets

!4

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

Dominic Wilcox has created a fully functional prototype pair of shoes that will guide the wearer to any destination !!!http://dominicwilcox.com/portfolio/gpsshoe/

!17

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

http://www.makeymakey.com/

• An Invention Kit for Everyone • Turn everyday objects into touchpads and combine them with the internet

!22

BONUS :)

MAKEY MAKEY

http://www.makeymakey.com/ - Foto: http://www.flickr.com/photos/raster/8605560001/!23

MORE INTERESTING DEVICESI 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 ABOUTALL THE THINGS!

!32

SO LETS TALK ABOUTALL THE THINGS! EXCEPT FOR THE COWS.

!33

SO LETS TALK ABOUTJAVASCRIPT 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

–Jeff Atwood / The Principle of Least Power

„Any application that can be written in JavaScript, will eventually be written in JavaScript“

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

http://semu.github.io/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(); }); });

!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

http://jsfiddle.net/rwaldron/YHb7A/show/light/

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) ); });

!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

http://semu.github.io/noduino/

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(); });

!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

HYPOTHESISTHE INTERNET AND SENSORS WILL INFILTRATE EVERYTHING

!51

HYPOTHESISTHERE 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