Meteor 0.9.2-rc1 is fun to play with, Cordova support functional

Last night I started playing with `meteor –release 0.9.2-rc1` which you can read about and play with too; check it out here:
https://meteor.hackpad.com/Getting-Started-With-Cordova-Z5n6zkVB1xq

It’s wonderful!

The local development and hot-code-push is a great improvement over any other solution I’ve been using. Builds were painless (mostly).

Most of my stumbling points were due to 9x, not the new Cordova stuff.

A few interesting details…

Cordova gets built here:

$ ll -a .meteor/local/cordova-build
drwxr-xr-x+  8 admin  wheel   272B Sep  9 16:37 .
drwxr-xr-x+  6 admin  wheel   204B Sep  9 17:14 ..
-rw-r--r--+  1 admin  wheel   488B Sep  9 10:14 config.xml
drwxr-xr-x+  3 admin  wheel   102B Sep  9 10:14 hooks
drwxr-xr-x+  2 admin  wheel    68B Sep  9 10:14 local-plugins
drwxr-xr-x+  4 admin  wheel   136B Sep  9 16:37 platforms
drwxr-xr-x+ 11 admin  wheel   374B Sep  9 16:37 plugins
drwxr-xr-x+ 13 admin  wheel   442B Sep  9 16:37 www

$ ll -a .meteor/local/cordova-build/platforms
drwxr-xr-x+  4 admin  wheel   136B Sep  9 16:37 .
drwxr-xr-x+  8 admin  wheel   272B Sep  9 16:37 ..
drwxr-xr-x+ 18 admin  wheel   612B Sep  9 16:38 android
drwxr-xr-x+ 10 admin  wheel   340B Sep  9 16:38 ios

So far, nothing easy in regards to configuring Cordova, but I’d guess we can edit the config.xml files… I’d love to see an app icon builder package sometime…

  • point it at a source and it renders all sizes
  • or it allows you to specify versions for every size
  • it would recreate the XML config needed for all icons and rename them as needed

Plugins FTW

Installing Cordova plugins probably *should* be done via Meteor Packages, because it’s an awesome approach.

Here is my first attempt:
https://github.com/zeroasterisk/meteor-cordova-geolocation-background

Currently I’m working on integration and configuration code (porting from a non-package code over the next few days), but the Cordova build system seems to have correctly found and installed the right plugins for me:

$ ll -a .meteor/local/cordova-build/plugins
total 32
drwxr-xr-x+ 11 admin  wheel   374B Sep  9 16:37 .
drwxr-xr-x+  8 admin  wheel   272B Sep  9 16:37 ..
-rw-r--r--+  1 admin  wheel   4.7K Sep  9 16:37 android.json
drwxr-xr-x+  8 admin  wheel   272B Sep  9 16:37 com.romainstrock.cordova.background-geolocation
-rw-r--r--+  1 admin  wheel   4.6K Sep  9 16:38 ios.json
drwxr-xr-x+ 13 admin  wheel   442B Sep  9 16:37 org.apache.cordova.console
drwxr-xr-x+ 14 admin  wheel   476B Sep  9 16:37 org.apache.cordova.device
drwxr-xr-x+ 14 admin  wheel   476B Sep  9 16:37 org.apache.cordova.file
drwxr-xr-x+ 13 admin  wheel   442B Sep  9 16:37 org.apache.cordova.file-transfer
drwxr-xr-x+ 13 admin  wheel   442B Sep  9 16:37 org.apache.cordova.geolocation
drwxr-xr-x+ 13 admin  wheel   442B Sep  9 16:37 org.apache.cordova.statusbar

I expect to see a lot of new Meteor Cordova plugins soon.

It’s a brave new world.

Meteor Core Cordova Support – Alpha Release is out

We’ve been watching this for a while, but now the first Alpha release is out for Meteor + Cordova built into the core.

SWEET!

Watch the DevShop Presentation on it here: https://www.youtube.com/watch?v=zzNoXbv1DX4&feature=youtu.be&t=24m

 

And here are instructions to get it going and play with it: https://meteor.hackpad.com/Getting-Started-With-Cordova-Z5n6zkVB1xq

 

Also, just an update, MeteorRider is still a strong and simple option for getting Meteor into Cordova (DOM hijacking), but I’m also checking out another great looking option is Cordova Loader (builds all Cordova assets into the public folder of Meteor).  Of course there’s also Packmeteor, which is an early version of what the core Cordova implementation seems to be.

 

I’m the most excited about:

  • Core API is clean (Meteor.isCordova is simple but brilliant) and Cordova.depends() sounds great too
  • Vastly improved local development early on, tying a cordova emulator to the localhost development is very well done
  • Meteor packages which can implement Cordova plugins… that will be a wildly convenient way to integrate “vetted” plugins in a simple manner.

If this is a space you are working in, jump on board the Meteor core implementation as early as you can, log bugs, submit pull requests, and make it official/important.  This will end up being a significant feather in Meteor’s hat, making Meteor + Mobile a powerful pairing.

Testing tools for Old OS & Browser Combos

Lots of us have to trace down odd bugs and test things on different browsers and OS combinations… Of course, the worst of which is “various versions of IE” on “various versions of Windows”. It seems crazy, but the same version of IE can behave differently on a different version of Windows.

The two best solutions I’ve used are:

http://www.modern.ie/en-us/virtualization-tools [free, vm locally]

and

http://www.browserstack.com/ [costs, web based]

I just got assigned a crappy bug ticket on IE8 + WinXP and had to dust this off again… thought I’d send out a post, see if it helps others and triggers a discussion which might help me out too.

Great advice from Arunoda “Just Contribute!”

http://readme.lk/noticed-tech-crowd-interview-arunoda-susiripala/
 
This advice might be aimed at people who already consider themselves developers, but there’s a nugget in there that’s perfect for anyone who is interested in getting started…
 
Pick some open-source project, probably a smaller one, that does something you’re interested in.  Maybe it’s something you tried out and used.  Maybe it’s something you tried out and it didn’t work out.  Maybe it’s something you looked at and didn’t understand.
 
Then… help out.  
 
Report an issue if you had one, even just requesting more information/instructions or pointing out what was unclear.
 
Better yet, fork and clone the repository…
 
Add to the readme. Build out some documentation.
 
Refactor a single function, add comment blocks in the code, standardize code formatting… or if you’re up for it, add a new feature or fix a legitimate bug.
 
Then submit a pull request.  
 
Communicate with other developers to defend your Pull Request.  Sometimes they go in and sometimes they don’t, but it’s still great experience and your contributions remain available on your repo (and forks do get seen/used).
 
 MeteorRider Pull Request
 
If this sounds foreign… don’t be intimidated – it isn’t hard.  
 
Do it three times and you’ll be totally comfortable.  
 
Do it thirty times and you’ll be a much better developer, you will have helped the community at large, and things you use will be improved.  Stick with it and your contributions will be noticed by other developers.  Also there is a public history of your contributions which can only help when it comes time to apply for the next job.

my pull request, please merge it

Meteor + PhoneGap/Cordova (Roundup – Fall 2013)

UPDATE: see meteor-core-cordova-support-alpha-release-is-out (2014-08-25) for new information


 

About Meteor and PhoneGap / Cordova

Meteor is a rapid server/client development framework, written in JS – makes very interactive apps easy to build. http://meteor.com

PhoneGap / Cordova is a project to allow developers to use HTML, CSS, and JS to build mobile apps for all major devices. http://phonegap.com

Basics of Integrating Meteor + PhoneGap / Cordova

The basic idea here is to use PhoneGap / Cordova to create a mobile App on several different platforms at once and it gives device hardware access; then “load” your Meteor application, which handles all of the rest of whatever you want your app to do.

Why this approach?

Meteor already has a lot of what you’d want for any App, including client/server shared logic, client optimization and caching, and an amazing client/server data sync/transfer system.  It’s fast, easy to work in, and well documented.  If you ignore the mobile aspect, this is a wonderful platform — if we can get it to work with mobile devices, then it’s a no-brainer win.

PhoneGap / Cordova is a convenient “shell” for this, allowing you to get the device hardware hooks in/out of JS, and load up whatever HTML, CSS, JS you like.  Web developers love it, and even people who can work with native Android or iOS (etc) apps may like it because it’s cross platform, business logic only has to be written once.  (Also, it’s now a lot more organized and stable after the 3x release)

Meteor + PhoneGap = Win!

The benefits of both are easy to combine. It’s your web app, and now it’s also your mobile app.

Just in case you didn’t hear that, your full application is available on the web and on the device exactly the same, you only have to build it once.  You simply have to slap on some responsive CSS and have logic in your app that determines if you’re in PhoneGap or not (more on that later).

More: http://prezi.com/ig9gjm11mwsi/from-zero-to-mobile-web-app-in-sixty-minutes/

Integration Options

CordovaPhonegap (Lazy Loading)

This approach starts the PhoneGap / Cordova out at the URL to the Meteor App.  This means NOTHING on the PhoneGap www folder gets loaded, and everything is loaded via Meteor.  After the page has loaded, it attempts to load the correct PhoneGap / Cordova JS file (again, from Meteor, out of the public folder) and then run device specific logic.

https://github.com/awatson1978/cordova-phonegap

Pros

  • Fast – fast to initially load, and internal changes are also fast
  • No middle layer in PhoneGap, no exchange
  • Simple way to get Meteor app into App Store and monetized
  • Apps built with this method have gotten approved in both iTunes and Google Play

Cons

  • Complicated because there are lots of different Cordova JS files you may have to support, for different browsers and different versions.
  • PhoneGap plugins JS more complicated (again, has to be managed inside Meteor, but versions kept in sync with PhoneGap)

MeteorRider (DOM Hijacking)

This approach is somewhere between the other 2.  The PhoneGap / Cordova files live on the device in the PhoneGap www folder.  The App starts up with the local index.html file, but then JS “hijacks” the DOM, it does an AJAX request to your Meteor app and rewrites the document with your Meteor document, triggering all the events needed for Meteor to startup.

This gives Meteor access to all the PhoneGap JS (already loaded) but the PhoneGap JS is bundled for each device/version within PhoneGap.  It also puts all of the PhoneGap JS into the global scope alongside Meteor JS.

https://github.com/zeroasterisk/MeteorRider

Pros

  • Simple to manage, because all the device-specific code is within PhoneGap (each version is bundled)
  • Pretty fast, the base level AJAX request is pretty fast
  • Scope is easy, because PhoneGap is available to Meteor directly
  • App JS can be tested independent of Meteor (just don’t load it)

Cons

  • Scope collision is possible, be careful
  • Global scope collisions are very possible, you have to be careful with your plugins and variable names.

Meteor-Cordova (Push / iFrames)

This approach is perhaps the most isolated.  It uses JS to make an iframe inside of the PhoneGap / Cordova “page” and to create a “queue” to exchange JS from Meteor to PhoneGap and back.  Meteor and PhoneGap can only talk to each other through this exchange, not directly.

https://github.com/raix/Meteor-Cordova

Pros

  • Simple to manage, because all the device-specific code is within PhoneGap (each version is bundled)
  • Sort-of fast, the base level iframe is pretty fast, but the in-iframe scrolling can lag
  • Scope is isolated, no collisions
  • App JS can be tested independent of Meteor (just don’t load it)
  • Plugins are basically guaranteed to work, because they are 100% isolated
  • Sophisticated use of Appcache

Cons

  • Scope is more complicated and slow, you HAVE to learn and use the exchange methods
  • it’s an iFrame… (ick)
  • because it’s an iFrame, scrolling can lag/flicker on some devices

Packmeteor (update)

This builds all of the Meteor JS/CSS assets, along with the Cordova HTML/JS/CSS assets into a single bundle for deployment.

https://github.com/SpaceCapsule/packmeteor

Pros

  • Fastest load time
  • All assets always correct versions, in sync

Cons

  • You have to have your users download a new version of your app to get updates
  • Versions can get out of sync

“Loader” (update)

This is a newer approach which builds all Cordova JS files into an asset hosted-on/loaded-from Meteor’s public folder.

https://github.com/andrewreedy/cordova-loader

Pros

  • Fast load time
  • Sophisticated use of Appcache
  • You no not have download a new version of your app to get updates
  • Versions can no longer get out of sync

Cons

  • ???

“Core Support” (update)

The Meteor Core team is working on Cordova Support.

See their Cordova Support Brainstorming HackPad
and the Dev Branch on GitHub.

Update:
Watch the DevShop Presentation of Cordova ALPHA release
and here are instructions to get it going and play with it.

Pros

  • Fast load time
  • Sophisticated use of Appcache/localStorage
  • You no not have download a new version of your app to get updates
  • Versions can no longer get out of sync

Cons

  • ???

Smoothing the Rough Edges

For any of these options, you need to know:

  • from Meteor
    • Am I loaded into a device via PhoneGap?
    • Is the device loaded?  (deviceread, before Meteor is loaded, or after)
    • What hardware hooks are available?
  • from PhoneGap
    • Is Meteor connected (status)?
    • Do we need a “fallback” URL, if Meteor is not online

Some of that is built into all of the options, but there is a lot of room left for “making is easy”.

There is also some need for simplifying and standardizing some of the JS needed on the PhoneGap side (for the “hijack” and “iframe” methods) to load the Meteor app and failover if it’s not available.

Feel free to contribute if you accomplish any of these, or if you want to help out with the documentation (github fork & pull request).

Conclusions

These are all new approaches and libraries.  There will be more support from the Meteor core for Mobile sometime, but that may be a while.  Until then, these are great options for making an excellent mobile app with Meteor and PhoneGap.

Alan’s favorite = “iframes” because the isolation is good for PhoneGap plugins

I personally HATE iframes with a passion, but after having used (and contributed to) all three options, I’m personally using the “iframe” method now.  This is because I have had trouble with PhoneGap plugins with the other methods.

no plugins?  = “hijack” because it’s fast and simple

If you don’t plan on using plugins, but may use PhoneGap core API then I recommend the “hijack” method.  It’s fast, simple, and you don’t have the awkward iframe exchange in the middle.

Finally, if you don’t use anything from PhoneGap at all, and it’s just a shell/browser for your Meteor App, you may prefer “lazy loading” – it is dead simple.  Be aware though, the long list of Cordova versions your app will eventually have to support makes this option my least favorite long term.

Resources

on Meteor

General PhoneGap Guides

on Meteor + PhoneGap

Meteor Packages:

Looking for a new blog platform

I’m working too much to afford the time to build one right now, but I’m looking into a MeteorJS bloging system….  Anyone got a recommendation?  @zeroasterisk

MOSSCON 2013 was lots of fun

I had a great time attending and presenting at moscon.

http://mosscon.org/

May 18 – 19, 2013 | University of Louisville | Louisville, Kentucky

I know it was a lot of work for the people who set it up, but you did a great job and I look forward to attending again in another year.

(if I present again next time, my slides will be more readable, I promise…)

Windows + Linux guy, switching to OSX

I have recently switched to Mac full-time, coming from a Windows/Linux background.

Here are some general (easy to install/use) applications you might find useful.  (advanced notice might come out in a bit)

———————————————————
Jing – free / can pay for extra features (multi-platform)

  • Take Screenshots: Capture an image of what you see on your computer screen
  • Record Screencasts: Record up to 5 minutes of onscreen video + audio
Inline image 2

Inline image 3

Alfred – free / can pay for extra features
  • Increase your productivity
    by launching apps with shortcuts
  • Instant access to
    web searches, bookmarks
    & more
  • Browse and play music from your
    iTunes library
    quickly
  • Perform actions
    =96 copy, move & email files & folders
  • Ward off RSI
    =96 skip using the mouse with easy shortcuts
Inline image 4
note: I paid for the “powerpack” upgrade for things like global hotkeys.
Inline image 5
SoundSource – free

SoundSource is a tiny application for Mac OS X enabling you to switch your audio input and output sources with a single click, and even adjust their volume settings.

https://rogueamoeba.com/freebies/

Inline image 1

Growl – $1.99
(Excellent System/Application Notifications)
Skype’s internal notifications are annoying and worthless, upgrading to Growl and setting it as your notification system for skype will allow you to never miss a Skype message.
(now that I’ve made that statement, I’d better be more quickly
responsive, eh?)
Inline image 9
Inline image 6
(Yes, even though I’m cheap, I paid for it and happy I did)
Caffeine – free
(great for presentations, watching a meeting, etc)

Caffeine is a tiny program that puts an icon in the right side of your menu bar. Click it to prevent your Mac from automatically going to sleep, dimming the screen or starting screen savers. Click it again to go back.

Inline image 7
Adium – free
Great multi-support IM client… covers just about everything but skype :(
Inline image 8
Synergy – free (multi-platform)
This one only barely makes the “easy” list… but if you have multiple computers+monitors sitting side-by-side, you can use this application to share a keyboard and mouse across them.
If this sounds good to you, read up on it and we might be able to help you set it up… if not, ignore this one.
Inline image 10