Native NodeJS Apps

Name: Native NodeJS Apps
Uploaded: 2014-05-29T00:00:00.000Z
Description: 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 app, and more.

by Jacob Lowe on May 29, 2014

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