This was my first talk at JSLA. At the time I had given talks quite a bit a meetup called Riverside.JS. I love looking back on this talk because it was just at the time when electron was split into its own project. I do not even think that I name electron at all because at the time it was called atom-shell.

Native NodeJS apps are a relatively new breed of apps coming out of the NodeJS community that combine NodeJS and Webkit. Ill be going over

• what are the options out there
• what kind of things can these apps do compared to webapps
• what are the current pro/cons of making a NodeJS native

Native NodeJS apps are a relatively new breed of apps coming out of the NodeJS community that combine NodeJS and Webkit.

Transcripts (auto-generate)

• 00:05
  so how's everybody doing
• 00:07
  um my name is jacob and i'm going to be
• 00:09
  talking about native node.js apps
• 00:13
  i'm on github it's my username for
• 00:15
  github i'm going to have i have some
• 00:17
  relevant material up there so if you
• 00:19
  want to go check that out um all my
• 00:21
  demos will be up there as well
• 00:22
  i work full time at a company called
• 00:24
  honey inc we make embeddable
• 00:26
  quizzes and and ads and stuff it's
• 00:29
  really cool um we're looking uh we have
• 00:32
  some job openings up on our website um
• 00:35
  if you're interested come talk to me
• 00:36
  afterwards and then i'm also an
• 00:38
  ambassador for syngrid
• 00:41
  so you might be thinking like what is a
• 00:42
  native node.js app
• 00:45
  you can almost say like isn't all
• 00:47
  node.js apps native because you can
• 00:49
  essentially run c code from them so
• 00:52
  i don't know how much more native you
• 00:54
  can get
• 00:56
  well yeah they are they are native
• 00:58
  node.js apps but i'm i was trying to
• 01:00
  think like what
• 01:02
  should i call these type of apps because
• 01:04
  there's not really like a a
• 01:05
  qualification or like a marketing term
• 01:07
  for these type of apps so like it's not
• 01:09
  a web app at all because it does so much
• 01:12
  more than a web app it would be kind of
• 01:13
  degrading to it to say hey it's a web
• 01:15
  app
• 01:16
  a native web app is actually a little
• 01:17
  bit better but it's it's not a web app
• 01:20
  at all because a kind of a web app like
• 01:22
  implies that it can be ran on a browser
• 01:24
  which if you run a heavily modified
• 01:27
  browser you can run these apps but not
• 01:29
  really on a regular web browser
• 01:32
  node.js app it is kind of a node.js app
• 01:35
  but like when you say node.js app
• 01:38
  you're usually talking about something
• 01:39
  like a web server or some type of
• 01:41
  networking server or even though it can
• 01:43
  be a number of things and then like
• 01:46
  native node.js app is kind of lame as
• 01:48
  well i mean i don't like it i think we
• 01:50
  could do a little bit better
• 01:52
  so like super effing cool way to use
• 01:54
  webtech to make a native-esque type of
• 01:57
  app
• 01:58
  i like that a lot better
• 02:00
  so but really what i'm talking about is
• 02:03
  a lightweight version of a browser
• 02:05
  and then the runtime of the browser is
• 02:08
  replaced with node.js runtime which is
• 02:10
  really cool and i say most instances
• 02:13
  because there's a lot of choices
• 02:15
  um well not a lot of choices but there's
• 02:17
  multiple choices to this
• 02:19
  and and luckily they're open source as
• 02:20
  well
• 02:22
  so
• 02:23
  the first one i'm going to talk about is
• 02:26
  desk shell now desk shell
• 02:28
  has been around for a while
• 02:30
  it's
• 02:31
  not that actually actively developed but
• 02:34
  it is very close to a web app you
• 02:37
  essentially are running a web app that
• 02:39
  interacts with the backend
• 02:41
  and they're kind of they're it used to
• 02:42
  be called app.js and i think they
• 02:44
  changed the name because they're looking
• 02:45
  to support php i don't know if that's
• 02:46
  considered like a bad thing about this
• 02:49
  type of app but
• 02:52
  um and then the big guy that i think
• 02:54
  most of you have probably heard about is
• 02:56
  a node webkit it's very full featured
• 02:58
  i've built apps in node webkit it is
• 03:00
  very cool they even have a grunt plugin
• 03:02
  to pack applications which is just
• 03:04
  awesome
• 03:05
  like you have no idea
• 03:07
  it is kind of slow to start up
• 03:10
  and there's a number of reasons for that
• 03:13
  and actually i was going to talk about
• 03:15
  node webkit throughout this whole entire
• 03:17
  presentation
• 03:18
  um but then something happened uh this
• 03:21
  month and just for reference for people
• 03:23
  who are watching this online this is may
• 03:25
  of 2014
• 03:27
  so what happened is that
• 03:29
  github
• 03:31
  released their atom ide to open source
• 03:33
  which i thought was great i mean a new
• 03:35
  project that's open source it's using
• 03:37
  very similar technologies i've actually
• 03:39
  speculated with a lot of my friends that
• 03:40
  they're using node webkit
• 03:42
  in atom to build this ide
• 03:45
  but they actually hired on one of the
• 03:47
  core developers of node webkit to build
• 03:50
  adam shell
• 03:51
  which is very actively developed because
• 03:54
  it's
• 03:55
  from github and it acts just like
• 03:57
  node.js runtime
• 03:59
  it is missing a few key features because
• 04:01
  really it was just built to run their
• 04:03
  ide and now they're just open sourcing
• 04:05
  it so eventually they'll get these
• 04:06
  features like uh for instance you can't
• 04:08
  even set like an icon to the app very
• 04:10
  easily grant you can do it but you have
• 04:13
  to kind of hack around to do it compared
• 04:15
  to like what you can do in node webkit
• 04:18
  so before i talk about like
• 04:20
  how cool these things are these types of
• 04:22
  apps there is some things to think about
• 04:24
  before you like try to build a
• 04:25
  production app with one of these
• 04:28
  so it's different i mean this is with
• 04:30
  all new technology it's going to be
• 04:32
  different um for instance like things
• 04:34
  like live reload will not work right off
• 04:37
  the bat with it maybe actually this
• 04:39
  stuff's being actively developed pretty
• 04:40
  quick so there actually might be a
• 04:42
  plug-in for live reload now
• 04:44
  but at the time of making this there
• 04:45
  wasn't
• 04:46
  and like
• 04:47
  it's it's just weird and like for
• 04:49
  instance have you ever made a web app
• 04:51
  that you've never had that you don't
• 04:53
  have access to the window object like
• 04:56
  you always have access to that where you
• 04:57
  can like just store stuff in there and
• 04:59
  you can just pull stuff right back out
• 05:01
  these types of apps you don't have that
• 05:02
  capability
• 05:04
  sometimes you have it'll
• 05:06
  access window a lot of times though
• 05:08
  and then like there's something that we
• 05:10
  don't have to deal with as web
• 05:12
  programmers that you have to deal with
• 05:14
  with these type of apps which is like
• 05:15
  uses on different os's usually these
• 05:17
  browsers just work on these different
• 05:19
  os's and you have to worry about you
• 05:21
  know the actual processes and stuff
• 05:23
  but um
• 05:25
  you have the same
• 05:26
  browser but now you you're storing data
• 05:28
  into different locations i actually have
• 05:31
  an app that i built that like
• 05:33
  i had a friend on a mac computer that
• 05:35
  couldn't run it just for some stupid
• 05:37
  reason
• 05:39
  um but yeah that's one thing to look out
• 05:41
  for
• 05:42
  um and then actually uh the app store
• 05:44
  like a lot of people are trying to like
• 05:45
  release these apps the app store i've
• 05:47
  heard a lot of nightmare situations
• 05:48
  where they didn't uh pass
• 05:50
  uh the app store and then i've actually
• 05:54
  heard of a few node webkit ones that
• 05:56
  have
• 05:57
  but um adam shell i guess there's people
• 05:59
  trying to do it but a few of the github
• 06:01
  employees don't think that they're gonna
• 06:04
  pass
• 06:05
  and then it's experimental like some of
• 06:07
  the features that you've used on web and
• 06:10
  that you've come to love or on node.js
• 06:13
  some of those features just don't work
• 06:15
  like
• 06:16
  granted you can get native plugins to
• 06:17
  work npm modules that run c code but
• 06:20
  like there is catches for instance like
• 06:22
  adam shell
• 06:23
  is only running version 0
• 06:26
  0 11 9 is the first version that it came
• 06:29
  out with so if you have a native plugin
• 06:30
  that's running at 0 10
• 06:33
  only is compatible with 0 10 versions of
• 06:35
  node
• 06:36
  you're going to run into a lot of issues
• 06:37
  because they did a lot of changes with
• 06:38
  native bindings
• 06:40
  but there is before i blame you guys out
• 06:42
  there is a lot of exciting stuff about
• 06:44
  this app about these types of apps and
• 06:46
  one thing that really excites me is that
• 06:47
  like w3 standards they have a bunch of
• 06:50
  different specs that come out all the
• 06:51
  time that like are just like
• 06:53
  experimental sometimes or sometimes you
• 06:56
  know have been around for a while but
• 06:58
  actually these features can be built by
• 06:59
  just your regular
• 07:01
  javascript programmer so they can start
• 07:03
  playing with these types of things right
• 07:05
  away and actually what's cool is that
• 07:06
  you can actually learn these
• 07:07
  technologies before they even come out
• 07:09
  in browsers so when they do come out
• 07:11
  it's not something new to you
• 07:14
  and then you actually have control over
• 07:15
  the browser as a web programmer there's
• 07:17
  always been that moment where you just
• 07:19
  like curse ie8 you know to all hell
• 07:22
  where like something's broken you don't
• 07:24
  know why you actually control
• 07:26
  the the browser that you're running on
• 07:28
  which is great which means you can run
• 07:30
  you know all the cool apis that that
• 07:32
  browser gives you
• 07:34
  um
• 07:35
  it's it isn't just a node.js app it does
• 07:38
  so much more like it has a gui that
• 07:40
  isn't a terminal i mean i don't know how
• 07:42
  many times you know
• 07:44
  a client has asked you for a terminal
• 07:46
  program that they can play around with
• 07:48
  because it doesn't happen because
• 07:49
  clients usually want something that's
• 07:51
  nice and pretty and something that has
• 07:53
  an actual gui not just a terminal
• 07:55
  program
• 07:57
  it this is for people who like
• 08:00
  hate saying setting up dbs or they just
• 08:02
  don't want to do it
• 08:03
  it actually has built-in web storage so
• 08:05
  if you wanted to actually get up and
• 08:06
  started without having to set up
• 08:07
  something like leveldb or our uh
• 08:10
  mysql or sqlite or something some
• 08:13
  embeddable database it actually already
• 08:15
  has indexeddb and local storage and all
• 08:17
  that kind of cool stuff in it so you can
• 08:20
  get started really quick
• 08:21
  and it has a real dom i don't know how
• 08:23
  important this is to you but
• 08:25
  you can actually interact with this dom
• 08:26
  and see things happening where like if
• 08:28
  you use js dom and stuff it feels kind
• 08:30
  of abstract
• 08:31
  you're interacting with it but it's it's
• 08:33
  kind of you know something that is um
• 08:36
  very abstract
• 08:38
  and then you have access to native
• 08:39
  features and i'm talking about like
• 08:41
  native gui features like menus menu bars
• 08:44
  windows docs start menu and actually i
• 08:47
  have a demo here of a
• 08:49
  node webkit app
• 08:51
  um and this is a note-taking app that
• 08:54
  syncs up with gist and actually you have
• 08:56
  access to
• 08:58
  as you can see here i have you know
• 09:00
  access to the file menu
• 09:01
  when i like try to switch apps you see
• 09:03
  that it's in here
• 09:05
  let me close that
• 09:07
  so you actually have access to those
• 09:08
  types of things which is great because
• 09:11
  like you i granted you could probably do
• 09:12
  that with a regular node.js app but you
• 09:14
  have to hack around to get to it and
• 09:16
  then it's like kind of awkward without a
• 09:17
  window to actually show a gui in
• 09:21
  so all those things were about like node
• 09:23
  uh like web apps like what abs what uh
• 09:26
  what web apps do compared to node.js
• 09:28
  apps so i want to explain why it's not
• 09:31
  just a web app
• 09:33
  so you have access to node.js apis like
• 09:36
  streams file system child processes all
• 09:38
  kinds of really cool stuff built in and
• 09:41
  i'm not talking about like file access
• 09:43
  like you would have in chrome or file
• 09:45
  access that you would have like through
• 09:47
  browserify or something you actually
• 09:49
  have access to the whole file system
• 09:51
  which is great we'll grant it you have
• 09:52
  the permissions
• 09:55
  um and then synchronous module imports
• 09:58
  these are really great where you just
• 09:59
  like
• 10:00
  require something and it's there
• 10:03
  where like i i can hear you saying like
• 10:05
  oh whatever you know you can you you can
• 10:08
  actually do this stuff with component i
• 10:10
  o or or browserify so why is that
• 10:13
  important
• 10:14
  but actually you have like access to
• 10:16
  like all the npm modules on npm granted
• 10:19
  there are some um some gotchas where
• 10:22
  like with native modules and stuff like
• 10:24
  that where
• 10:25
  they kind of don't work um sometimes but
• 10:28
  a lot of the modules will work right out
• 10:30
  of the box
• 10:32
  and one thing that's really cool is that
• 10:33
  you can actually interact with installed
• 10:35
  programs like git python or like your
• 10:38
  keychain or something and actually i
• 10:39
  have another demo showing this
• 10:42
  so i'm going to go to my terminal
• 10:45
  switch over
• 10:48
  and i'm going to go
• 10:53
  so i'm going to start up the app this is
• 10:54
  actually an adam shell app
• 10:58
  as you can see it's showing me like a to
• 11:00
  do of like a a to do md
• 11:04
  and actually i'll go into my editor
• 11:07
  and i'll open up this one let me bring
• 11:09
  that back
• 11:11
  so
• 11:12
  um
• 11:13
  let's say i want to
• 11:14
  check off like we went to the the kitty
• 11:17
  bar afterwards
• 11:18
  so i save that and then you'll see
• 11:21
  that it should update
• 11:25
  so it updated so i'm actually
• 11:26
  interacting with git here
• 11:28
  i'm actually
• 11:29
  just running a
• 11:31
  um
• 11:33
  a child process to
• 11:35
  run git right here so i spawn a get
• 11:39
  process and then i just spit that the
• 11:41
  output straight to the the uh
• 11:44
  the window
• 11:46
  which is really cool because i didn't
• 11:47
  have to set up web sockets or or
• 11:49
  anything crazy to get that running i
• 11:51
  just it was it felt kind of natural
• 11:53
  those things just interacting with each
• 11:54
  other
• 11:56
  and then also another really cool thing
• 11:58
  is that i have access to hardware now i
• 12:00
  have another demo here
• 12:03
  and i'm not a hardware guy so
• 12:05
  it's just a little bit of a warning so i
• 12:07
  have this arduino board hooked up to a
• 12:11
  like a breadboard with an accelerometer
• 12:13
  on here
• 12:14
  and then i have a demo app
• 12:23
  that i'm going to run and is anybody
• 12:25
  epileptic because i'm going to change
• 12:27
  the background color of this thing
• 12:29
  pretty quickly
• 12:31
  yeah
• 12:34
  oh actually real quick it's going to
• 12:35
  throw an air
• 12:37
  and that is because
• 12:39
  i need to be sudo to get access to the
• 12:41
  usb port
• 12:45
  okay
• 12:46
  so give it a second it's going to start
• 12:49
  turning colors
• 12:50
  so actually the wiring is probably off
• 12:53
  on here because i'm not a uh
• 12:56
  a uh
• 12:57
  hardware guy but i can actually move
• 12:59
  this thing around and it will change
• 13:01
  colors and sometimes you'll get some
• 13:02
  pretty colors out of it
• 13:04
  but
• 13:05
  yeah so i'm actually talking directly to
• 13:07
  the app from this piece of hardware
• 13:09
  which i mean i don't know of any web
• 13:12
  apps that can really do that and i'm
• 13:14
  using uh johnny five and
• 13:16
  some hackery to to get this thing
• 13:18
  working on adam's shell it's kind of a
• 13:20
  pain to get that kind of stuff working
• 13:22
  but yeah
• 13:23
  my name is jacob and thanks
• 13:41
  um so you can't run these things on
• 13:43
  mobile phones right now just because you
• 13:45
  would have to install like an apk or
• 13:49
  an actual like ios app and these things
• 13:51
  are mainly for desktop currently so but
• 13:55
  you can have access to the camera of the
• 13:57
  computer
• 13:59
  but again you can do that kind of stuff
• 14:00
  with web apps as well with get user
• 14:02
  media and stuff like that
• 14:07
  so if you were starting a new project
• 14:09
  would you use node webkit or or adam
• 14:11
  michelle
• 14:12
  okay so
• 14:13
  i should have said this before but the
• 14:14
  main difference between adam's shell and
• 14:16
  node webkit is that
• 14:19
  node webkit your entry point is like an
• 14:21
  html file so you essentially you render
• 14:24
  that html file and then you start
• 14:25
  running the scripts on that html page
• 14:28
  and that's how you start up a node
• 14:29
  webkit app
• 14:30
  and with adam's shell it's different
• 14:33
  because you have an entry point of a
• 14:35
  js file so you actually start running
• 14:38
  the js process and then you can open up
• 14:41
  windows when your app's ready which is
• 14:42
  kind of good with like
• 14:44
  perceived uh performance like oh it's
• 14:47
  opening up real fast but really you're
• 14:49
  just waiting before and then opening up
• 14:51
  the app
• 14:52
  i would have to say
• 14:53
  i would probably use adam's shell
• 14:56
  well
• 14:57
  it depends because if i
• 14:59
  if the the timeline was like a month
• 15:02
  probably node webkit because i need a
• 15:04
  lot of the features that node webkit has
• 15:06
  but if let's say it's like six months
• 15:09
  adam shell probably will catch up in
• 15:11
  terms of like the nice features like
• 15:13
  icons and stuff like that in six months
• 15:16
  so i would probably for a longer project
• 15:18
  picked adam shell
• 15:21
  it's written in coffee script oh yeah
• 15:23
  that is the down part but
• 15:25
  luckily you can interact with it with
• 15:27
  javascript
• 15:30
  okay um i think this is probably not a
• 15:34
  fair question for you but i've been
• 15:35
  using atom editor and
• 15:38
  ui wise visual
• 15:40
  it's awesome i love it but performance
• 15:42
  wise
• 15:43
  it's really sluggish
• 15:46
  yes
• 15:47
  you can speak on that at all so you is
• 15:50
  you're essentially you're not completely
• 15:51
  native you're still running a web
• 15:53
  browser you're dealing with all the the
• 15:55
  rendering of a web browser i mean it's
• 15:57
  the same performance issues that you
• 15:58
  would run into with a regular web
• 16:00
  browser
• 16:01
  right now it's not completely optimized
• 16:05
  and i don't think there's you know
• 16:07
  there's stuff that they can do
• 16:09
  eventually to to optimize that but i
• 16:11
  yeah i don't know i guess i'm just like
• 16:14
  it's almost a proxy question for you i
• 16:16
  want to ask when i said get up but like
• 16:18
  are they aware of it
• 16:20
  yeah they are aware of it actually i i
• 16:22
  saw recently they pushed a big update
• 16:23
  for scrolling speeds that's supposed to
• 16:25
  improve the scrolling speeds actually i
• 16:27
  have a linux box so i haven't really had
• 16:30
  the the
• 16:31
  the royalties of getting to use atom uh
• 16:34
  the the actual ide
• 16:35
  until recently so
• 16:37
  yeah i don't
• 16:39
  yeah i think they're they're doing stuff
• 16:40
  to make the performance a little bit
• 16:42
  better but it's still not completely
• 16:43
  native
• 16:49
  can we see the code for the hardware
• 16:51
  yeah
• 16:53
  so in the hardware
• 16:56
  i just require the app here let me blow
• 16:58
  this up
• 16:59
  a little bit
• 17:04
  so i require the app and then with adam
• 17:07
  they have like this browser window and
• 17:08
  then this is johnny five it's just a
• 17:11
  module that i had to install
• 17:13
  and then i just make a new board
• 17:15
  when the board's ready i
• 17:17
  make an accelerometer which is
• 17:21
  talking to this thing and then when the
• 17:23
  accelerometer inputs change i emitted
• 17:26
  event
• 17:27
  and let's see if we scroll over
• 17:28
  accelerometer change and that just sends
• 17:31
  out the data to that event
• 17:34
  and here i'm just opening up the window
• 17:35
  when the app is ready
• 17:37
  and then actually the html file
• 17:41
  so you have to do like background
• 17:43
  require remote and then as you see from
• 17:45
  the background i can require the app
• 17:48
  and then in here
• 17:49
  see this is converting it all
• 17:52
  and right here i listen to the change
• 17:53
  event so i grab the app and i look for
• 17:55
  that excel change and then i handle the
• 17:58
  change which then does some conversion
• 18:01
  stuff to make it a little bit more like
• 18:02
  rgb
• 18:05
  than it comes out as
• 18:11
  right here so
• 18:13
  i guess given some of the like cross
• 18:17
  uh cross os compatibility issues like
• 18:20
  when
• 18:21
  what would be the primary use case for
• 18:23
  this like when would you say yeah we'll
• 18:25
  do
• 18:26
  we'll use uh node webkit rather than
• 18:29
  just we'll build a node app and we'll
• 18:32
  tell people to run it in webkit
• 18:35
  um so
• 18:36
  i think the main use case is when you
• 18:39
  need something that's um
• 18:43
  you want to build like a node app that
• 18:45
  that has some good performance and you
• 18:47
  want to write node code but you also
• 18:49
  want access to some modules that you can
• 18:52
  then like pull out bluetooth or some
• 18:55
  technology that's just not quite there
• 18:58
  plus like
• 19:00
  for instance i i reference the the
• 19:02
  service worker api or spec that's coming
• 19:05
  out um
• 19:06
  and like there's gonna they're gonna do
• 19:08
  a lot of like network proxy next network
• 19:11
  proxy and stuff with that to make like
• 19:13
  caching really good in a browser but
• 19:16
  with like this type of stuff you can
• 19:17
  already do like those types of things to
• 19:19
  where you can have really good caching
• 19:21
  and really good you know uh access
• 19:24
  really good like um
• 19:25
  access to cash assets and stuff
• 19:29
  so i would say like if you're doing
• 19:30
  something with hardware it's a definite
• 19:31
  go because
• 19:33
  i don't know when you're ever going to
• 19:34
  be able to like connect up a usb to
• 19:36
  arduino board and then run like a web
• 19:38
  app
• 19:39
  um
• 19:40
  but besides that there's there is i mean
• 19:43
  there's a lot of cool things about it
• 19:45
  but really uh
• 19:47
  there's not too many differences from
• 19:50
  the web platform which is kind of nice
• 19:52
  in itself because then you can you know
• 19:54
  have very similar code bases if you
• 19:55
  wanted to make a web app in one of these
• 19:57
  kind of like native esk apps
• 20:01
  uh give it up for jacob
• 20:11
  you