angr

writings from zac anger, who is not all that angry

getting up and running with nw.js really super quickly

February 14, 2016 — Zac Anger

There are basically two main ways to build a desktop app in JS: Electron (formerly called 'Atom-Shell') and NW.js (formerly called 'Node-Webkit'). Electron's really swell, probably offers more options overall, and has a cleaner way of keeping Node and client-side code separate. NW.js is a heckuva lot easier, overall, though.

This is what I've been using to build and run Pharaoh: https://github.com/nwjs/nw-builder

There's also a nifty sort of version manager for NW.js here: https://www.npmjs.com/package/nwjs , which worked a little more smoothly out of the box, but gave me issues when trying to get Node integration to work.

To get up and running with NW.js using nw-builder, you basically just need to put the relevant information in your package.json. The relevant info on that is all here: https://github.com/nwjs/nw.js/wiki/Manifest-format but mostly it's just something like

"window": {
  "height": 800,
  "width": 1200,
  "title": "my app"
}

et cetera. The main field (which usually has, like, server/index.js or whatever in it), needs to be what NW.js is pointed to. That can be an HTML file ("main": "./client/public/index.html" or whatever) or a URL (if you're serving the app, especially locally--this is how Atom, Brackets, LightTable, etc. do things, except using Electron).

That's basically it, I think. There are a lot of great Yeoman generators and stuff to scaffold out NW.js apps, but they're mostly overkill.

Using nw-builder makes things pretty simple. npm i -g nw-builder, then just run nwbuild -h to see the options. (I use nwbuild -r . in the project root/wherever the relevant package.json is, to run the app).

Their docs are really good, and there's a crapload of options and neat stuff you can do: https://github.com/nwjs/nw.js/wiki

tags: nwjs, desktop, node, electron, app

so, tweet it?  

Electron and NW.js

January 15, 2016 — Zac Anger

Electron (formerly known as Atom Shell) and NW.js (formerly known as Node Webkit) are similar projects that bring Javascript to the desktop. They're both based on browser runtimes. Electron is sponsored by Github, and uses libchromiumcontent and Webkit 537 (as of Autumn 2015). NW.js is sponsored by Intel and uses Chromium and Blink/Webkit 537. They both use the V8 JS engine (from Chrome), are fully open source (MIT Licensed), can access a variety of open and licensed codecs, work on Unix-like systems (and, with a little extra work, on Windows), and can use Flash (in Electron's case, through the Pepper plugin). The biggest difference I've had in working with them is that Electron, being currently more popular (likely because of the Github support, and the popularity of the Atom editor, which is built on Electron) is usually closer to the current version of Chromium, and NW.js is usually a few versions behind. Electron seems to have a lot more community activity around it right now, too, so there are a lot of useful NPM packages like Electron-Prebuilt (and a lite version) and Electron-Packager (and an interactive version!). Electron also needs a Javascript entry point, which looks something like this:

var app           = require('app')  
  , BrowserWindow = require('browser-window')  
require('crash-reporter').start()  

var mainWindow = null  

app.on('window-all-closed', function(){  
  if(process.platform != 'darwin'){  
      app.quit()  
  }  
})  
app.on('ready', function(){  
  mainWindow = new BrowserWindow({  
    width                : 1200  
  , height               : 800  
  , 'accept-first-mouse' : true  
  , 'title-bar-style'    : 'hidden'  
  , 'node-integration'   : false  
  })  
  mainWindow.loadUrl('http://127.0.0.1:9090')  
  mainWindow.on('closed', function(){  
    mainWindow = null  
  })  
})  

That 'node-integration' line is really important if you want to use certain client-side libraries like Angular or jQuery that use the word 'module;' your stuff will just completely break without it.

NW.js, on the other hand, can just be pointed at your index.html, and that's enough to get started. That's really convenient, but for my own uses I've found that Electron has a lot more options. Its binaries are significantly larger, but there are evidently ways to cut them down. Don't count on being able to build an Electron app in less than a hundred megs, though.

If you're doing something small, like a text editor or some other little widgety kind of app, you'd probably still be better off with Qt or GTK--you can write a full text editor in GTK-Webkit with Python in less than 16kb, and that's if need a full rich-text interface with buttons and such. But for larger apps, and especially for apps you've already written for the browser, NW.js and Electron are both really great options. If you're going to be relying on a lot of the Node environment, Electron's got a better interface to Node because of its separated rendering and browser engines, but you do have to keep in mind that you'll be limited as to what client-side libraries you can use.

tags: nwjs, electron, desktop, js, javascript, apps, node

so, tweet it?  

Notes

January 13, 2016 — Zac Anger

So, I have a lot of notes that I've taken over the course of the last couple of months. Seeing as they're not doing me a whole lot of good sitting in a pile of Markdown files, I'm gradually going through them, cleaning them up, and I think I'll just post them all as sort of blog posts. Why not? So here's a little list of the topics I'll be covering over the next few weeks:

  • Unicode
  • SystemJS (and JSPM)
  • Go
  • UI
  • Github Organizations
  • Functional Reactive Programming (and RxJS)
  • Elm
  • Browserify
  • Bash Builtins
  • Firebase
  • ES6
  • Pusher
  • Styleguides
  • Passport (and problems getting errors out of Express)
  • React (and Webpack)
  • Isomorphic React
  • Flux
  • Meteor
  • All the reasons I kind of dislike Angular
  • Bacon.js
  • Basics of webmastering (which is totally not a word)
  • Functional programming (in general)
  • Effective web design
  • Mongo (and Mongoose, and MongoJS, and Mongolayer)
  • Ruby, maybe a little bit
  • Electron (formerly Atom Shell)
  • NW.js (formerly Node Webkit)
  • Gulp
  • Node in general
  • Probably a good bit of Node stuff, really
  • I like Node a lot
  • Maybe a little bit of jQuery?
  • The developer hiring process
  • Maybe a little bit of that Javascript language, or something?
  • Probably not much at all on HTML, because HTML doesn't need... notes... really
  • CSS... lol, CSS.
  • People, and the experience of dealing with people on a regular basis
  • What it's like to live with the people I live with
  • What it's like to actually find myself liking human beings, and wanting to be around them, especially certain ones, quite a lot. (It's weird!)

tags: blogs, personal, notes, education, react, js, electron, flux, meteor, elm, gulp, css, es6, ruby, mongo, bash, unicode, go, ui, design

so, tweet it?  

things learned dealing with electron and the mean stack

December 16, 2015 — Zac Anger

In the interest of blogging the little things, I want to write down a couple of things I learned while struggling through my project. Nothing major, but a few things that I really had to dig to find answers to, buried way underneath unrelated issues in Github and whatnot.

read more...

tags: javascript, js, electron, angular, mean, school, css

so, tweet it?  

Projects, projects, projects.

December 09, 2015 — Zac Anger

I haven't really mentioned what I'm actually doing here, yet, a whole lot. Well, it should be pretty obvious, but it's mostly cramming as much Javascript into my head as I can possibly handle. THen forgetting some, then relearning it. Lots of that, over and over again, until eventually a good bit starts to stick. For a really large list of the stuff I've been working on, I have some public repos on my Github. The pertinent ones would be the actual DevMountain assignments and small projects, and the repo full of extras, things I wanted to learn or messed around with or whatever, since I've been here.

The bigger things are the no-server and personal projects--and in my case, my personal project is (at least conceptually) based on the no-server project (which was, as it sounds, just client-side Angular app.)

Markvi

read more...

tags: school, devmtn, markvi, projects, editor, electron

so, tweet it?  

zac anger?