Building native desktop applications with node-webkit

•

3 gostaram•3,534 visualizações

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

Mais conteúdo relacionado

Mais procurados

Bootiful Reactive Testing - Mario GrayVMware Tanzu

Using Chef and Vagrant at GengoGengo

Bootiful Reactive Testing - Mario GrayVMware Tanzu

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

Eclipse Buildship DemoCamp Hamburg (June 2015) with additional screenshotssimonscholz

Running jenkins in a public cloud - common issues and some solutionsAndrey Devyatkin

GitHub Actions for 5 minutesSvetlin Nakov

OpenShift for developers in action! - jbcnconf19Jorge Morales

Visual Studio App Center: React Native A/B TestingJohn M. Wargo

Yeoman WorkflowJohn-Philip Johansson

JHipster presentation by Gaetan BlochGaëtan Bloch

Automating WordPress Plugin Development with GulpMike Hale

First Real Pull Request EverIkuru Kanuma

GradleのREPLプラグイン紹介 #jggugkyon mm

GR8Conf 2015 - Spring Boot and Groovy. What more do you need?Iván López Martín

Automating your workflow with Gulp.jsBo-Yi Wu

Odo improving the developer experience on OpenShift - hack & sangriaJorge Morales

Angular workflow with gulp.jsCihad Horuzoğlu

Dockerized apps on KubernetesŁukasz Barulski

Gopenflow demo v1 (english)Hiroaki Kawai

Mais procurados (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)

Semelhante a Building native desktop applications with node-webkit

Prototyping in the cloudKirsten Hunter

DIY Java & KubernetesPance Cavkovski

Cloud expo-east-2015argvader

Javascript and jQuery PennApps Tech Talk, Fall 2014Kathy Zhou

Deploying phalcon on herokuTung Ns

Service workersPavel Zhytko

SmartgearsFabio Simeoni

Dexterity in 15 minutes or lessrijk.stofberg

Getting Your Hooks Into CordovadevObjective

Getting your Hooks into CordovaGavin Pickin

Getting Your Hooks into CordovaColdFusionConference

Using hapi plugins to version your API (hapiDays 2014)Dave Stevens

Optimizing Spring Boot apps for DockerGraham Charters

NativeScript Developer Day Keynote - Todd Anglin & Burke HollandBrian Rinaldi

Automating Drupal Development: Makefiles, features and beyondNuvole

instruction of install Caffe on ubuntu Pouya Ahv

Research software and Dataversephilipdurbin

Building a Django App on HerokuJoe Fusaro

CoffeeScript: A beginner's presentation for beginners copyPatrick Devins

Polyglot automation - QA Fest - 2015Iakiv Kramarenko

Semelhante a 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

Último

Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024StefanoLambiase

Advantages of Odoo ERP 17 for Your BusinessEnvertis Software Solutions

Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Mater

Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service9953056974 Low Rate Call Girls In Saket, Delhi NCR

Software Project Health Check: Best Practices and Techniques for Your Product...Velvetech LLC

Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed

A healthy diet for your Java application Devoxx France.pdfMarharyta Nedzelska

Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...OnePlan Solutions

How to submit a standout Adobe Champion ApplicationBradBedford3

Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran

Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odishasmiwainfosol

MYjobs Presentation Django-based projectAnoyGreter

Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Matt Ray

What is Fashion PLM and Why Do You Need ItWave PLM

英国UN学位证,北安普顿大学毕业证书1:1制作qr0udbr0

Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ

Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent

2.pdf Ejercicios de programación competitivaDiego Iván Oliveros Acosta

Introduction Computer Science - Software Design.pdfFerryKemperman

Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Building native desktop applications with node-webkit

Semelhante a Building native desktop applications with node-webkit (20)

Último

Último (20)

Building native desktop applications with node-webkit