Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

•

26 gefällt mir•18,924 views

Eddie Lau

2014 01 Codeaholics Meetup sharing

Technologie Design

Native Desktop App
with Node-Webkit
!

(Javascript, HTML, CSS)

Eddie Lau
@tatonlto
github.com/3dd13

Centralized
Easy to deploy
Cross-platform
Single-code-base
(if there is no IE)

Sometimes

Desktop App!
is better than
Web App

One click installer
No server
No internet
Native functionality
(actually … HTML5 & Chrome App can do most too !)

single-code-base
cross-platform
Desktop App development
is …

Raise hand
if you have written any
Java Swing

so …

few months ago
I saw
Node-Webkit
https://github.com/rogerwang/node-webkit

Node-Webkit
build

a .exe / .app
which contains
Node.js & Webkit

Node.js!
allows you to write
Desktop program!
using JS

Webkit!
allows you to write
Desktop App UI!
using!
HTML, CSS & JS

the packaging was
clumsy though
!

https://github.com/rogerwang/node-webkit/wiki/How-topackage-and-distribute-your-apps
(height of packaging documentation === 5 * window.height)

Have to zip everytime
to test updated .app

yesterday

I saw
Grunt-Node-Webkit-Builder
https://github.com/mllrsohn/grunt-node-webkit-builder

Questions ?
Eddie Lau
@tatonlto
github.com/3dd13

Empfohlen

Cross-platform Desktop application with AngularJS and build with Node-webkitWittawas Wisarnkanchana

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

Amsterdam.js talk: node webkitFabian Jakobs

Desktop apps with node webkitPaul Jensen

Bringing Javascript to the Desktop with ElectronNir Noy

High Productivity Web Development WorkflowVũ Nguyễn

Desktop Apps in a Javascript World - ElectronMarc MacLeod

Getting Started with HTML 5 Web workersFlumes

Empfohlen

Cross-platform Desktop application with AngularJS and build with Node-webkitWittawas Wisarnkanchana

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

Amsterdam.js talk: node webkitFabian Jakobs

Desktop apps with node webkitPaul Jensen

Bringing Javascript to the Desktop with ElectronNir Noy

High Productivity Web Development WorkflowVũ Nguyễn

Desktop Apps in a Javascript World - ElectronMarc MacLeod

Getting Started with HTML 5 Web workersFlumes

Building desktop applications with web technologies - ELECTRON the easy waystefanjudis

Electron - Build desktop apps using javascriptAustin Ogilvie

Electron - Build cross platform desktop appsPriyaranjan Mohanty

Building a Desktop Streaming console with Node.js and WebKitEmanuele Rampichini

JavaScript Web WorkersTobias Pfeiffer

Building Cross Platform Apps with ElectronChris Ward

Isomorphic web applicationOliver N

Cross-Platform Desktop Apps with ElectronDavid Neal

Launch Arguments & NSUserDefaults by Franck LefebvreCocoaHeads France

Building a Desktop Streaming console with Electron and ReactJSEmanuele Rampichini

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스민태 김

Building Native Experiences with ElectronBen Gotow

Web workersSurbhi Mathur

HTML5 Web Workers-unleashedPeter Lubbers

Andrew Mykhaliuk - Sorry, I need to make a build for frontendOdessaJS Conf

ElectronVirginia Rodriguez

ElectronJens Siebert

Using Minikube for Node.js developmentTroy Connor

ProtoPie with ElectronScotty Kim

BP101: A Modernized Workflow w/ Domino/XPagesedm00se

Hardware Acceleration in WebKitJoone Hur

Writing robust Node.js applicationsTom Croucher

Weitere ähnliche Inhalte

Was ist angesagt?

Building desktop applications with web technologies - ELECTRON the easy waystefanjudis

Electron - Build desktop apps using javascriptAustin Ogilvie

Electron - Build cross platform desktop appsPriyaranjan Mohanty

Building a Desktop Streaming console with Node.js and WebKitEmanuele Rampichini

JavaScript Web WorkersTobias Pfeiffer

Building Cross Platform Apps with ElectronChris Ward

Isomorphic web applicationOliver N

Cross-Platform Desktop Apps with ElectronDavid Neal

Launch Arguments & NSUserDefaults by Franck LefebvreCocoaHeads France

Building a Desktop Streaming console with Electron and ReactJSEmanuele Rampichini

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스민태 김

Building Native Experiences with ElectronBen Gotow

Web workersSurbhi Mathur

HTML5 Web Workers-unleashedPeter Lubbers

Andrew Mykhaliuk - Sorry, I need to make a build for frontendOdessaJS Conf

ElectronVirginia Rodriguez

ElectronJens Siebert

Using Minikube for Node.js developmentTroy Connor

ProtoPie with ElectronScotty Kim

BP101: A Modernized Workflow w/ Domino/XPagesedm00se

Was ist angesagt? (20)

Building desktop applications with web technologies - ELECTRON the easy way

Electron - Build desktop apps using javascript

Electron - Build cross platform desktop apps

Building a Desktop Streaming console with Node.js and WebKit

JavaScript Web Workers

Building Cross Platform Apps with Electron

Isomorphic web application

Cross-Platform Desktop Apps with Electron

Launch Arguments & NSUserDefaults by Franck Lefebvre

Building a Desktop Streaming console with Electron and ReactJS

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스

Building Native Experiences with Electron

Web workers

HTML5 Web Workers-unleashed

Andrew Mykhaliuk - Sorry, I need to make a build for frontend

Electron

Using Minikube for Node.js development

ProtoPie with Electron

BP101: A Modernized Workflow w/ Domino/XPages

Andere mochten auch

Hardware Acceleration in WebKitJoone Hur

Writing robust Node.js applicationsTom Croucher

Codemotion rome 2015 bluemix lab tutorial -- Codemotion Rome 2015Codemotion

Luciano Fiandesio - Docker 101 | Codemotion Milan 2015Codemotion

An introduction to workflow-based programming with Node-REDBoris Adryan

WebKit and GStreamercalvaris

Flow Base Programming with Node-RED and Functional Reactive Programming with ...Sven Beauprez

Come rendere il proprio prodotto una bomba creandogli una intera community in...Codemotion

Getting started with go - Florin Patan - Codemotion Milan 2016Codemotion

The Evolution of Asynchronous Javascript - Alessandro Cinelli - Codemotion Mi...Codemotion

Understanding Webkit RenderingAriya Hidayat

Lo sviluppo di Edge Guardian VR - Maurizio Tatafiore - Codemotion Milan 2016Codemotion

Master the chaos: from raw data to analytics - Andrea Pompili, Riccardo Rossi...Codemotion

DevOps in Cloud, dai Container all'approccio Codeless - Gabriele Provinciali,...Codemotion

Milano Chatbots Meetup - Vittorio Banfi - Bot Design - Codemotion Milan 2016 Codemotion

Lean frontend development - Codemotion Roma 2015Matteo Guidotto

Social media project 1210884 mj kimbanana930

Andere mochten auch (17)

Hardware Acceleration in WebKit

Writing robust Node.js applications

Codemotion rome 2015 bluemix lab tutorial -- Codemotion Rome 2015

Luciano Fiandesio - Docker 101 | Codemotion Milan 2015

An introduction to workflow-based programming with Node-RED

WebKit and GStreamer

Flow Base Programming with Node-RED and Functional Reactive Programming with ...

Come rendere il proprio prodotto una bomba creandogli una intera community in...

Getting started with go - Florin Patan - Codemotion Milan 2016

The Evolution of Asynchronous Javascript - Alessandro Cinelli - Codemotion Mi...

Understanding Webkit Rendering

Lo sviluppo di Edge Guardian VR - Maurizio Tatafiore - Codemotion Milan 2016

Master the chaos: from raw data to analytics - Andrea Pompili, Riccardo Rossi...

DevOps in Cloud, dai Container all'approccio Codeless - Gabriele Provinciali,...

Milano Chatbots Meetup - Vittorio Banfi - Bot Design - Codemotion Milan 2016

Lean frontend development - Codemotion Roma 2015

Social media project 1210884 mj kim

Ähnlich wie Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

From React to React Native - Things I wish I knew when I startedsparkfabrik

Responsive web design & mobile web development - a technical and business app...Atos_Worldline

Skill Session - Web Multi Devicefilirom1

JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker

Angularjs Tutorial for Beginnersrajkamaltibacademy

Everything about flutter web developmentKaty Slemon

Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer

Mobile Development with PhoneGapJoshua Johnson

HTML5 Can't Do ThatNathan Smith

Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College

Mobile native-hacksDevelopmentArc LLC

Mobile Apps presentationTom Printy

Electron - cross platform desktop applications made easyUlrich Krause

Nodejsdssprakash

Introduction to Cross-Platform Hybrid Mobile App DevelopmentÖzcan Zafer AYAN

The Gist of React NativeDarren Cruse

DotNet Cologne 2015 - Windows 10 AppDev, Teil1: App Developer Basics- (Daniel...Daniel Meixner

Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London

NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin

Native App + Wep App = ? (Hybrid Applications)GameWisp

Ähnlich wie Native Desktop App with Node.js Webkit (HTML, CSS & Javascript) (20)

From React to React Native - Things I wish I knew when I started

Responsive web design & mobile web development - a technical and business app...

Skill Session - Web Multi Device

JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Angularjs Tutorial for Beginners

Everything about flutter web development

Tutorial: Develop Mobile Applications with AngularJS

Mobile Development with PhoneGap

HTML5 Can't Do That

Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework

Mobile native-hacks

Mobile Apps presentation

Electron - cross platform desktop applications made easy

Nodejs

Introduction to Cross-Platform Hybrid Mobile App Development

The Gist of React Native

DotNet Cologne 2015 - Windows 10 AppDev, Teil1: App Developer Basics- (Daniel...

Busy Developer's Guide to Windows 8 HTML/JavaScript Apps

NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular

Native App + Wep App = ? (Hybrid Applications)

Kürzlich hochgeladen

Histor y of HAM Radio presentation slidevu2urc

A Domino Admins Adventures (Engage 2024)Gabriella Davis

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Real Time Object Detection Using Open CVKhem

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

A Call to Action for Generative AI in 2024Results

Slack Application Development 101 Slidespraypatel2

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

Automating Google Workspace (GWS) & more with Apps Scriptwesley chun

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

Kürzlich hochgeladen (20)

Histor y of HAM Radio presentation slide

A Domino Admins Adventures (Engage 2024)

Exploring the Future Potential of AI-Enabled Smartphone Processors

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Real Time Object Detection Using Open CV

🐬 The future of MySQL is Postgres 🐘

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Handwritten Text Recognition for manuscripts and early printed texts

Powerful Google developer tools for immediate impact! (2023-24 C)

Presentation on how to chat with PDF using ChatGPT code interpreter

Factors to Consider When Choosing Accounts Payable Services Providers.pptx

A Call to Action for Generative AI in 2024

Slack Application Development 101 Slides

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Boost Fertility New Invention Ups Success Rates.pdf

Finology Group – Insurtech Innovation Award 2024

Automating Google Workspace (GWS) & more with Apps Script

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

1. Native Desktop App with Node-Webkit ! (Javascript, HTML, CSS) Eddie Lau @tatonlto github.com/3dd13

2. I love Web App

3. Centralized Easy to deploy Cross-platform Single-code-base (if there is no IE)

4. But

5. Sometimes Desktop App! is better than Web App

6. One click installer No server No internet Native functionality (actually … HTML5 & Chrome App can do most too !)

7. But, but

8. single-code-base cross-platform Desktop App development is …

9. DAMN HARD

10. Raise hand if you have written any Java Swing

11. so … few months ago I saw Node-Webkit https://github.com/rogerwang/node-webkit

12. ^___^

13. Node-Webkit build a .exe / .app which contains Node.js & Webkit

14. what does that mean ?

15. Node.js! allows you to write Desktop program! using JS

16. Webkit! allows you to write Desktop App UI! using! HTML, CSS & JS

17. the packaging was clumsy though ! https://github.com/rogerwang/node-webkit/wiki/How-topackage-and-distribute-your-apps (height of packaging documentation === 5 * window.height)

18. Have to zip everytime to test updated .app

19. T__T

20. yesterday I saw Grunt-Node-Webkit-Builder https://github.com/mllrsohn/grunt-node-webkit-builder

21. grunt

22. (^^)/

23. Demo https://github.com/3dd13/sample-nw

24. Questions ? Eddie Lau @tatonlto github.com/3dd13