Building native desktop applications with node-webkit

•

3 likes•3,534 views

We build web apps that runs on browser and server-side apps on Node.JS, but what’s about native Desktop applications? In this talk I will introduce node-webkit: an app runtime based on Chromium + Node.JS, you can use to build Desktop apps with JS and HTML, with no browser’s limitations like file-system calls or running native code.

Software

OUT OF THE SANDBOX
Building native Desktop apps
by Marco Pracucci - CTO @spreaker
at JsDay
on May 14, 2014
mercoledì 14 maggio 14

@pracucci
WHY DESKTOP ?
mercoledì 14 maggio 14

@pracucci
Hackable text editor
by GitHub
Atom.io
mercoledì 14 maggio 14

@pracucci
Spreaker Studio
Mix audio sources
and broadcast live
by Spreaker
mercoledì 14 maggio 14

@pracucci
WHY DESKTOP ?
HOW
mercoledì 14 maggio 14

@pracucci
NODE-WEBKIT
app runtime based upon
https://github.com/rogerwang/node-webkit
+
mercoledì 14 maggio 14

@pracucci
NODE-WEBKIT
runs on
developed by
Roger Wang at Intel
mercoledì 14 maggio 14

@pracucci
package.json
{
“name”: “Demo”,
“main”: “index.html”,
“window”: {
“width”: 600,
“height”: 400
}
}
index.html
<html>
<body>
<h1>My App</h1>
</body>
</html>
GETTING STARTED
mercoledì 14 maggio 14

@pracucci
<script>
var fs = require(“fs”);
var _ = require(“underscore”);
var _ = require(“lame”);
</script>
Node modules (built-in)
3rd party modules in JavaScript
3rd party modules in C/C++
GETTING STARTED
npm install ...
mercoledì 14 maggio 14

@pracucci
FRONT OR BACK ?
Should I use Angular or Express?
mercoledì 14 maggio 14

@pracucci
Think of it as a
frontend app
that can “just” use node modules
“
”
mercoledì 14 maggio 14

@pracucci
Single Page Apps
app://whatever/path
DESIGN
Multiple Page Apps
Ease repackage of your website
to a node-webkit app
{
“main”: “index.html”,
}
{
“main”: “app://foo/index.html”,
}
mercoledì 14 maggio 14

@pracucci
Generally speaking,
you can easily port your web app
to node-webkit
“
”
mercoledì 14 maggio 14

@pracucci
few builtin codecs,
but you can rebuild libffmpeg
to add any format / codec
MULTIMEDIA
<audio>
<video>
<canvas>
getUserMedia()
WebRTC
WebGL
...
mercoledì 14 maggio 14

@pracucci
• returns the real path on ﬁlesystem
• can open ﬁle dialog programmatically
<input type='file' />
FILE DIALOGS
mercoledì 14 maggio 14

@pracucci
Select a directory instead of a ﬁle
FILE DIALOGS
<input type='file' nwdirectory />
mercoledì 14 maggio 14

@pracucci
Select a (non) existing ﬁle
FILE DIALOGS
<input type='file' nwsaveas />
mercoledì 14 maggio 14

@pracucci
NATIVE UI MODULE
var gui = require('nw.gui');
Built-in module to control the Native UI:
mercoledì 14 maggio 14

@pracucci
My App File Edit 5:45 pm
My App
mercoledì 14 maggio 14

@pracucci
My App File Edit 5:45 pm
My App
gui.Window
mercoledì 14 maggio 14

@pracucci
My App File Edit 5:45 pm
My App
gui.Menu
gui.Window
mercoledì 14 maggio 14

@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
mercoledì 14 maggio 14

@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard
mercoledì 14 maggio 14

@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard gui.Shell
mercoledì 14 maggio 14

@pracucci
Source code will be
exposed.
Use nwsnapshot to compile
to native code.
(experimental)
zip -r app.nw *
1. Make a package
nw app.nw
2. Ship node-webit + app package
PACKAGING
mercoledì 14 maggio 14

@pracucci
Hard to contribute
CONTRIBUTING
You both need to know
Chromium and Node.JS internals
(and have a strong experience with C++)
mercoledì 14 maggio 14

@pracucci
with node-webkit you can easily
build native desktop apps
(and have a lot of fun !)
SUMMARY
mercoledì 14 maggio 14

Thank you!
https://joind.in/11272
Any feedback is welcome!
mercoledì 14 maggio 14

What's hot

Bootiful Reactive Testing - Mario Gray

VMware Tanzu

Using Chef and Vagrant at Gengo

Gengo

Bootiful Reactive Testing - Mario Gray

VMware Tanzu

node-webkit : Make a magic from your a desktop app to desktop app!

욱진 양

Eclipse Buildship DemoCamp Hamburg (June 2015) with additional screenshots

simonscholz

Running jenkins in a public cloud - common issues and some solutions

Andrey Devyatkin

GitHub Actions for 5 minutes

Svetlin Nakov

OpenShift for developers in action! - jbcnconf19

Jorge Morales

Visual Studio App Center: React Native A/B Testing

John M. Wargo

Yeoman Workflow

John-Philip Johansson

JHipster presentation by Gaetan Bloch

Gaëtan Bloch

Automating WordPress Plugin Development with Gulp

Mike Hale

First Real Pull Request Ever

Ikuru Kanuma

GradleのREPLプラグイン紹介 #jggug

kyon mm

Spring Boot allows the creation of Spring Framework based applications in a quick and easy way without any XML configuration. It does not generate code, but provides useful defaults and an opinionated approach to the configuration but it quickly gets out of the way when we want to change and override the configuration. As if this wasn't enough we can also create production-ready applications with features such as metrics, health checks and externalized configuration. If you add Groovy you have the perfect combination to speed up your development and have fun while developing. In this talk you will see introductory examples of Spring Boot, the creation of a small RESTful API, the usage of Websockets, some of the Spring Boot CLI goodness... and many more examples!

GR8Conf 2015 - Spring Boot and Groovy. What more do you need?

Iván López Martín

Automating your workflow with Gulp.js

Bo-Yi Wu

Odo improving the developer experience on OpenShift - hack & sangria

Jorge Morales

Angular workflow with gulp.js

Cihad Horuzoğlu

Dockerized apps on Kubernetes

Łukasz Barulski

Gopenflow demo v1 (english)

Hiroaki Kawai

What's hot (20)

Bootiful Reactive Testing - Mario Gray

Using Chef and Vagrant at Gengo

Bootiful Reactive Testing - Mario Gray

node-webkit : Make a magic from your a desktop app to desktop app!

Eclipse Buildship DemoCamp Hamburg (June 2015) with additional screenshots

Running jenkins in a public cloud - common issues and some solutions

GitHub Actions for 5 minutes

OpenShift for developers in action! - jbcnconf19

Visual Studio App Center: React Native A/B Testing

Yeoman Workflow

JHipster presentation by Gaetan Bloch

Automating WordPress Plugin Development with Gulp

First Real Pull Request Ever

GradleのREPLプラグイン紹介 #jggug

GR8Conf 2015 - Spring Boot and Groovy. What more do you need?

Automating your workflow with Gulp.js

Odo improving the developer experience on OpenShift - hack & sangria

Angular workflow with gulp.js

Dockerized apps on Kubernetes

Gopenflow demo v1 (english)

Similar to Building native desktop applications with node-webkit

Prototyping in the cloud

Kirsten Hunter

DIY Java & Kubernetes

Pance Cavkovski

Cloud expo-east-2015

argvader

Javascript and jQuery PennApps Tech Talk, Fall 2014

Kathy Zhou

Deploying phalcon on heroku

Tung Ns

Service workers

Pavel Zhytko

Smartgears

Fabio Simeoni

Dexterity in 15 minutes or less

rijk.stofberg

Getting Your Hooks Into Cordova

devObjective

Presented at dev.Objective() http://www.devobjective.com May 15, 2015 1:45 PM - 2:45 PM More info and resources related to presentation available here http://www.gpickin.com/devobj2015/cordovahooks/ Working in the web world, we have workflows and tools we are used to. We edit, save f5 reload to test our work as we go. Working with mobile, even Hybrid Mobile, is a very different workflow. Cordova lets us build hybrid apps but how do you test them, how do you interface with the Cordova build process, how do you debug. This session helps you go from "hello world" demo, to a professionally built app. Attendees will get the following out of the session: Learn about Cordova hooks and how to use them Integrate js-hint into prepare / build process for code validity Integrate testing into prepare / build process Learn to debug a Cordova Hybrid Mobile app Look at some other hooks and tools useful for your Cordova app. Gotchas from real world experience It would be useful if you have looked at, or built a hello world demo, with Cordova or PhoneGap.

Getting your Hooks into Cordova

Gavin Pickin

Getting Your Hooks into Cordova

ColdFusionConference

Using hapi plugins to version your API (hapiDays 2014)

Dave Stevens

Talk given at Devoxx Belgium 2018 Spring Boot is awesome. Docker is awesome. Together you can do great things. But, are you doing it the right way? We'll walk you through, in detail, the optimal way to structure Docker images for Spring Boot applications for iterative development. Structuring your Docker images correctly is really important for teams doing continuous integration and continuous delivery. Using Docker best practices, we'll show you the code and the technologies used to optimize Docker images for Spring Boot apps!

Optimizing Spring Boot apps for Docker

Graham Charters

NativeScript Developer Day Keynote - Todd Anglin & Burke Holland

Brian Rinaldi

Automating Drupal Development: Makefiles, features and beyond

Nuvole

instruction of install Caffe on ubuntu

Pouya Ahv

Research software and Dataverse

philipdurbin

Building a Django App on Heroku

Joe Fusaro

CoffeeScript: A beginner's presentation for beginners copy

Patrick Devins

Slides from "Polyglot Automation" talk given at QA Fest conference. There are many good programming languages. But test automation is preety simple so the power of language will not matter. But choosing language does matter for effective automation. How to choose the language for Web UI automation? Why Web UI automation is easy? How to choose easyy tools for your automation? How to learn new language and why? We will try to answer all these questions in this talk.

Polyglot automation - QA Fest - 2015

Iakiv Kramarenko

Similar to Building native desktop applications with node-webkit (20)

Prototyping in the cloud

DIY Java & Kubernetes

Cloud expo-east-2015

Javascript and jQuery PennApps Tech Talk, Fall 2014

Deploying phalcon on heroku

Service workers

Smartgears

Dexterity in 15 minutes or less

Getting Your Hooks Into Cordova

Getting your Hooks into Cordova

Getting Your Hooks into Cordova

Using hapi plugins to version your API (hapiDays 2014)

Optimizing Spring Boot apps for Docker

NativeScript Developer Day Keynote - Todd Anglin & Burke Holland

Automating Drupal Development: Makefiles, features and beyond

instruction of install Caffe on ubuntu

Research software and Dataverse

Building a Django App on Heroku

CoffeeScript: A beginner's presentation for beginners copy

Polyglot automation - QA Fest - 2015

Recently uploaded

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation

WSO2

Define the academic and professional writing..pdf

PearlKirahMaeRagusta1

%in tembisa+277-882-255-28 abortion pills for sale in tembisa

masabamasaba

Announcing Codolex 2.0 from GDK Software

Jim McKeeth

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...

Bert Jan Schrijver

Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid

Philip Schwarz

Craft an AI & Machine Learning Pitch with our Editable Professional PowerPoint Template. Ignite your AI & Machine Learning pitch with our cutting-edge PowerPoint template tailored for the industry. Perfect for AI conferences, investor presentations, sales pitches to tech-focused companies, training sessions, and educational programs. - 20+ editable slides: Get a variety of options to choose from for your presentation. - Time-saving solution: Download, replace text/images with a few clicks. - User-friendly customization: Easy to use and personalize. - Modern and attractive design: Captivating visuals, sleek layout. - Tailored to your requirements: Fully alterable for customization. - Well-organized slides: Complete control over content. - Thematic specificity: Reflects healthcare industry with relevant graphics. - Showcase your business idea: Communicate value proposition effectively.

AI & Machine Learning Presentation Template

Presentation.STUDIO

Data spaces in distributed environments should be allowed to evolve in agile ways providing data space owners with large flexibility about which data they store. Agility and heterogeneity, however, jeopardize data exchanges because representations may build on varying ontologies and data consumers may not rely on the semantic correctness of their queries in the context of semantically heterogeneous, evolving data spaces. Graph data spaces are one example of a powerful model for representing and querying data whose semantics may change over time. To assert and enforce conditions on individual graph data spaces, shape languages (e.g SHACL) have been developed. We investigate the question of how querying and programming can be guarded by reasoning over SHACL constraints in a distributed setting and we sketch a picture of how a future landscape based on semantically heterogeneous data spaces might look like.

Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...

Steffen Staab

VTU technical seminar 8Th Sem on Scikit-learn

AmarnathKambale

(Vivek)Call Us, 8448380779,Call girls in Delhi NCr – We Offer best in class call girls. escort Service At Affordable Price At low Rate with Space Night 8000 We Are One Of The Oldest Escort and Call girls Agencies in Delhi. You Will Find That Our Female Escorts Are Full Of Fun, Sexy And They Would Love Enjoy Your Company. We Have A Fantastic Selection Of Escort Ladies Available For In-Calls As Well As Out-Calls. Our Escorts Are Not Only Beautiful But All Have Great Personalities Making Them The Perfect Companion For Any Occasion. In-Call:- You Can Come At Our Place in Delhi Our place Which Is Very Clean Hygienic 100% safe Accommodation. Out-Call:- You have To Come Pick The Girl From My Place We Are Also Provide Door Step Services (Delhi Ncr, Noida, Gurgaon, Faridabad, Ghaziabad Note:- Pic Collectors Time Passers Bargainers Stay Away As We Respect The Value For Your Money Time And Expect The Same From You Hygienic:- Full Ac room And Clean Rooms Available In Hotel 24 * 7 Hourly In Delhi NCR More Details, With WhatsApp Number, +91-8448380779

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

Delhi Call girls

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein

masabamasaba

%in Soweto+277-882-255-28 abortion pills for sale in soweto

masabamasaba

%in Harare+277-882-255-28 abortion pills for sale in Harare

masabamasaba

We specialize in Psychic Readings, Psychic Love Spells, Binding Love Spells, Obsession Spells, Voodoo Spells, Lottery Spells, Marriage Spells, Black Magic Spells, Palm Readings & much more. Are you depressed? We perform this come-to-me love spell that works instantly with the aim of bringing back the victim to the person performing the magic. Have you lost your lover? We perform this come-to-me love spell that works instantly with the aim of bringing back the victim to the person performing the magic. Have you lost your lover? Do u need to solve any relationship problem? Contact the powerful spells caster chief kule with love spells that work overnight and love spells that really work. Have you found yourself infatuated with a special someone you think could be the one? Are you looking for a spell to provide them with a nudge in the right direction? Or maybe the spell you cast didn’t achieve the results you were hoping for? Whether you’re new or versed in the ways of spell casting, we’re here to help. Today we’re going to provide you with a detailed guide on the types of love spells to cast. Not only that but there’s something for those who wish to find outside advice from more advanced spell casters. We’re also going to provide you with the top sites available to help you with your dilemma. Let’s begin our journey by educating ourselves on love magic and what a real love caster looks like. Love Magic and Love Casters Love magic made its first appearance back in Ancient Egypt and has been an active practice since. This type of magic is a branch of traditional magic and can be practiced in various ways. Typically the more common use of love magic is through the work of spells, but other methods look like Charms Rituals-LOVE Potions-Dolls and even Amulets If you are interested in becoming a love caster, be prepared for what’s to come. A genuine love caster knows that the art of love casting is no easy feat and shouldn’t be done casually. You should know that not only does it require you to be gifted spiritually, but you must be ready to serve others. Someone who is considered a real love caster has experience in all manner of spells, no matter the difficulty. Training yourself in attraction, commitment, and marriage spells is an excellent place to start. But this by no means will make you a professional. Practice your craft and expand your knowledge; understand that you will possess the ability to help others in time truly. Types of Love Spells What better way to start broadening your experiences with love spells than by learning more about them? These spells work like just about any other spell. Simply apply your intention, use a medium (sigils, mantras, candles, or charm bags), and top it off with establishing the belief that you will receive what you want. So what kind of spells are available and which ones suit your needs the best? Let’s take a look at the many options you have at your disposal.

%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...

masabamasaba

WSO2CON2024 - It's time to go Platformless

WSO2

MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...

Jittipong Loespradit

%in Midrand+277-882-255-28 abortion pills for sale in midrand

masabamasaba

%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain

masabamasaba

%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...

masabamasaba

WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...

WSO2

Recently uploaded (20)

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation

Define the academic and professional writing..pdf

%in tembisa+277-882-255-28 abortion pills for sale in tembisa

Announcing Codolex 2.0 from GDK Software

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...

Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid

AI & Machine Learning Presentation Template

Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...

VTU technical seminar 8Th Sem on Scikit-learn

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein

%in Soweto+277-882-255-28 abortion pills for sale in soweto

%in Harare+277-882-255-28 abortion pills for sale in Harare

%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...

WSO2CON2024 - It's time to go Platformless

MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...

%in Midrand+277-882-255-28 abortion pills for sale in midrand

%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain

%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...

WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...

Building native desktop applications with node-webkit

1. OUT OF THE SANDBOX Building native Desktop apps by Marco Pracucci - CTO @spreaker at JsDay on May 14, 2014 mercoledì 14 maggio 14

2. @pracucci WHY DESKTOP ? mercoledì 14 maggio 14

3. @pracucci Hackable text editor by GitHub Atom.io mercoledì 14 maggio 14

4. @pracucci Spreaker Studio Mix audio sources and broadcast live by Spreaker mercoledì 14 maggio 14

5. @pracucci WHY DESKTOP ? HOW mercoledì 14 maggio 14

6. @pracucci NODE-WEBKIT app runtime based upon https://github.com/rogerwang/node-webkit + mercoledì 14 maggio 14

7. @pracucci NODE-WEBKIT runs on developed by Roger Wang at Intel mercoledì 14 maggio 14

8. @pracucci package.json { “name”: “Demo”, “main”: “index.html”, “window”: { “width”: 600, “height”: 400 } } index.html <html> <body> <h1>My App</h1> </body> </html> GETTING STARTED mercoledì 14 maggio 14

9. @pracucci <script> var fs = require(“fs”); var _ = require(“underscore”); var _ = require(“lame”); </script> Node modules (built-in) 3rd party modules in JavaScript 3rd party modules in C/C++ GETTING STARTED npm install ... mercoledì 14 maggio 14

10. @pracucci FRONT OR BACK ? Should I use Angular or Express? mercoledì 14 maggio 14

11. @pracucci Think of it as a frontend app that can “just” use node modules “ ” mercoledì 14 maggio 14

12. @pracucci Single Page Apps app://whatever/path DESIGN Multiple Page Apps Ease repackage of your website to a node-webkit app { “main”: “index.html”, } { “main”: “app://foo/index.html”, } mercoledì 14 maggio 14

13. @pracucci Generally speaking, you can easily port your web app to node-webkit “ ” mercoledì 14 maggio 14

14. @pracucci few builtin codecs, but you can rebuild libffmpeg to add any format / codec MULTIMEDIA <audio> <video> <canvas> getUserMedia() WebRTC WebGL ... mercoledì 14 maggio 14

15. @pracucci • returns the real path on ﬁlesystem • can open ﬁle dialog programmatically <input type='file' /> FILE DIALOGS mercoledì 14 maggio 14

16. @pracucci Select a directory instead of a ﬁle FILE DIALOGS <input type='file' nwdirectory /> mercoledì 14 maggio 14

17. @pracucci Select a (non) existing ﬁle FILE DIALOGS <input type='file' nwsaveas /> mercoledì 14 maggio 14

18. @pracucci NATIVE UI MODULE var gui = require('nw.gui'); Built-in module to control the Native UI: mercoledì 14 maggio 14

19. @pracucci My App File Edit 5:45 pm My App mercoledì 14 maggio 14

20. @pracucci My App File Edit 5:45 pm My App gui.Window mercoledì 14 maggio 14

21. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Window mercoledì 14 maggio 14

22. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window mercoledì 14 maggio 14

23. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window gui.Clipboard mercoledì 14 maggio 14

24. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window gui.Clipboard gui.Shell mercoledì 14 maggio 14

25. @pracucci Source code will be exposed. Use nwsnapshot to compile to native code. (experimental) zip -r app.nw * 1. Make a package nw app.nw 2. Ship node-webit + app package PACKAGING mercoledì 14 maggio 14

26. @pracucci Hard to contribute CONTRIBUTING You both need to know Chromium and Node.JS internals (and have a strong experience with C++) mercoledì 14 maggio 14

27. @pracucci with node-webkit you can easily build native desktop apps (and have a lot of fun !) SUMMARY mercoledì 14 maggio 14

28. Thank you! https://joind.in/11272 Any feedback is welcome! mercoledì 14 maggio 14

Building native desktop applications with node-webkit

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Building native desktop applications with node-webkit

Similar to Building native desktop applications with node-webkit (20)

Recently uploaded

Recently uploaded (20)

Building native desktop applications with node-webkit