Composing your web apps
I’ve been busy lately building Single Page Apps using the YUI App Framework and one thing I found is that when an app hits a certain size the actual Application container gets messy pretty quick. You spend all this time separating out the pieces of your app into views and models, but then the “glue” of the routes and event handling you end up with a massive “mess” of code. Even well structured code becomes difficult to maintain when it starts to creep up past a few hundred lines of well formatted code. So what can you do?
My first pass was just trying to mix in multiple apps.
This did not work. I realized that since each module has a views property they are getting overwritten, not merged, and the same was happening with the routes attribute as well. So that’s no good. So I considered extending App with something like .addSubApp() but that had it’s own problems.
What’s a dev todo? I really wanted the create syntax because that expressed what I wanted. Plus, I love mixing in modules, it allows for a lot of creation with little code. So I had a browse of what the YUI team are doing and decided that I would have to do something with that.
What I did
I took the core of the build method in base-built and added specific checks for views and routes and merged them together. This module is at my YUI App Extensions repository on github and I am happy to take comments or pull requests. I also have several other modules at that repo that are useful for App Development as well.
Using and abusing YUI Models and ModelSync.Rest
I have been building some apps lately with the YUI App Framework a JavaScript MV* framework built with YUI. One of the enhancements of the Model is the ModelSync capabilities provided by the REST module. See the example below.
However it is simple enough to add additional url calls. By specifying the url property of the model. The sync module will take the model attributes and use Y.Lang.sub to process the url property. So what does that mean? Individual methods can set the url property and then make a request to retrieve the data at that endpoint.
Depending on your purposes and url configuration you will want to either set the url property to null after the load is complete or update the url to a default configuration
This also works with the ModelList as well so you can craft custom queries to retrieve data to populate the list.
Extending models and model lists this way is really simple and can help extend your application.I was really pleased to see that this just works out of the box and required no additional changes to the Sync layer.
The next post I’ll be doing on the YUI App Framework will be creating sub apps and modularizing your app to allow for greater composability and better maintenance.
Tools of the Trade: Part 1
After the initial post I reckon it’s time to get started with this series. So the first tool on my list?
Node.js
Now I’m not talking about using node as a web server or anything like that. (That will come later) I am talking about using it for tooling. Repetitive tasks should be automated. Automating those tasks using node gives you the advantage of being able to easily use those scripts on any platform.
For instance, you have a way you like to setup your projects so you write up a script to do just that. If you are on a mac you could write a bash script, on windows maybe powershell. But that isn’t very portable. you can do it in node, put it up on npm and you can use that script anywhere and everywhere.
Installing Node and it’s package manager NPM is easy. Now for most installs I will recommend using chocolatey and brew (see part 0) however at one point npm wasn’t being installed correctly on the Mac. So head over to the Node.js site and download the installer or via chocolatey
C:> cinst nodejs.install
You may want to install either Visual C++ 2010 Express edition if you are on Windows, or XCode if you are on a Mac. Even if you have Visual Studio 2012 installed VC++ 2010 is still required. These tools allow you to build native node modules. Often modules that talk to other systems like databases often require native code to work.
Next tool
Grunt - The JavaScript Task Runner
Grunt is a task runner that has plenty of available plugins for automating development tasks and is easy to write your own tasks with. You don’t have to develop on Node to use Grunt in your build process. Any build process that allows you to calls to the command line is capable of using grunt. I have it running in Visual Studio projects where it will even fail a build if something does not work.
Install Grunt from the command line
npm install -g grunt-cli
This will tell npm to download the grunt command line module and install it globally. Next go to the root of your project and run
npm init
This will ask you a few questions and create a package.json file. This file will hold your dependencies (among other purposes)
If you want a quick win to improve your JavaScript development add this grunt file to your project.
Then just install the grunt contrib jshint module
npm install grunt-contrib-jshint —save-dev
Then when you run grunt from the command line your JavaScript files will be linted using JSHint.
I will be building on that grunt file as this series progresses.
In Conclusion
Node and Grunt are great tools to improve your Front End Development no matter what platform you target for development or deployment.
Tools of the trade Part 0
I am frequently asked why I don’t choose lib X, or why I choose tool Z so I thought I’d go into the tools I use and a little of why I don’t use others. So I’m going to have a go at explaining just that. First I want to get some technical details out of the way.
I use Windows for work, mostly because I have to use Windows for work. I’d prefer to do my job on a Mac, but considering I work in a .Net shop, that is pretty much out of the question. Now Windows is often treated like an outcast and often neglected when it comes to tooling. But that has been changing.
First up
The Command Line. Sorry Windows devs, but the command line is really useful, even in Windows, or at least Powershell is. I mean it’s no bash, but it’ll do.
Chocolatey.
From the site “Chocolatey NuGet is a Machine Package Manager, somewhat like apt-get, but built with Windows in mind”. This has been a great tool. I now have a script that takes a machine from zero to fully configured without me having to do little more than running a powershell command. From here on out I’ll be referencing installing apps via chocolatey.
ConEmu
The default console app in Windows is horrific, actually I don’t know if a word exists to describe how horrible it actually is. This is one of those area’s that OS X just kills Windows. However ConEmu provides a better console window to use. It is a console emulator that provides tabs, different consoles and even split screens. Never ever use the default windows console again.
Install it with C:\cinst ConEmu
Git
I prefer to use Git for my source control needs. I tend to avoid using a GUI for that so I just install Git and then Posh-Git and use Git from Powershell, not the cygwin bash shell Git installs. Post-Git gives you details about the repo that you are in, what branch you are on, uncommited changes and the like
Install Git C:\cinst Git
Install Posh-Git C:\cinst postgit
Installing Posh-Git will install Git for you, yay Chocolatey. You can install something like Github for Windows or Atlassian SourceTree but you don’t need them.
There you have it. Some useful tools that I hope to be building on in future posts. I know it seems a little scary all this talk of the command line but remember what Walter says
OS X
There are a few tools that are helpful.
Homebrew
Like Chocolately, Homebrew is a package manager for OS X. It lets you download and install apps. How to install Homebrew from the wiki
ITerm 2
While the default terminal in OS X isn’t bad iTerm 2 is great. Split panes, hotkey support, and many more features. Download from the site.
Oh-My-Zsh
Oh-My-Zsh is framework for managing the configuration for zshell. Oh-My-Zsh allows for different configurations that show many things from that command prompt. Install it and have a play. Oh-My-Zsh github repo
Git
As above install with homebrew $ brew install git
In conclusion
These are foundation tools that I will build off of in future posts.
Remember what Walter says
Game Development in Windows 8
I recently spoke on game development in Windows 8 with HTML and JavaScript. Here is my slidedeck
Here are some links from the talk
Additionally, if you are wanting to make games for Windows 8 you can have a look at Construct 2 and Game Salad as an alternative to Visual Studio that are dedicated to making HTML5 games.
“ Switching from YUI3 to jQuery is a bit like switching from cooking all your own meals to eating nothing but frozen TV dinners: sure it’s easier but your long term health (or in this case your application’s health) will soon begin to suffer and not get better. ”
A comment on a blog post about SugarCRM moving to jQuery from YUI.
Windows 8 Development, The JavaScript Story
Following my last post on my time with Windows 8, I’d like to write about actually developing for it.
My day to day development happens on a MacBook Pro with OS X Lion, using TextMate for writing js. I use the YUI Library as my go to front end library and I use node.js both for development tools and when I do non work related development. So yeah, I love JavaScript. So when Microsoft announced that HTML/JavaScript was a first class option for writing apps in Windows 8 it got my interest. (Full disclosure, I previously worked with .Net, and before that with ASP, so I know the MS stack)
Since I’ve covered my thoughts on Windows I’m going to dive straight to Visual Studio 11. Now I’m no stranger to VS, and have used every version since VS 6. But MS has decided to introduce Metro elements into VS. This caused much wailing and gnashing of teeth. However, when I use VS I turn off all the toolbars and all the panels but the solution explorer. As a text editor on Windows, Visual Studio is hands down awesome. I’ve lamented on more than one occasion that I wish MS would strip it down and release it as a text editor, the font rendering in Visual Studio now is excellent and nothing comes close to it on Windows. The only thing that I find the least bit annoying is the ALLCAPS for Panels, but if they want it to say SOLUTION EXPLORER instead of Solution Explorer, I’ll deal.
File, New, Project. You are presented a list of templates for JavaScript apps and MS has done a nice job of giving you starting points for various types of Metro apps. However I didn’t want any of those, I had decided to make game, and there was no templates for that.
After starting with a blank template I then proceeded to gather up some libs to use. As mentioned before I love YUI so grabbed it and brought it into my project. Reference it on the page, and what happpens? Intellisense. Now, it wasn’t full on intellisense with full descriptions, but I got code completion for code I didn’t expect. I was a little thing, but it was a nice touch. So the YUI code worked with no problem. But then I was only doing some DOM work to start with, now it’s time to really start working on the code.
Now as interesting as it would be to write a game from scratch I only had a weekend, so I decided to use Crafy.js, a JavaScript game library. Everything just worked. After I started noticing a bit of a slowdown when lot’s of things were happening on screen I got worried, was I doing something wrong? Was the idea of writing a fast JavaScript game really a pipe dream? Or was it something else? Well it turns out that I started off using the DOM too much, so I then moved to pure canvas and the game was wicked fast (and I continued to get it fast as I learned how to tune the code)
I ran the game in the lastest versions of Chrome and FireFox and was disappointed, especially with audio. I had a number of sounds going at once, as well as background music, shooting sounds, explosions all from events happening on the game and not once did I have a problem with Win8 playing them. Chrome just stopped playing all sound after a few seconds and FireFox only played some of the sounds (though those sounds never stopped and was a nicer degrade over Chrome)
Never once over the entire weekend did I feel the default tools or experience got in my way. I think that is worth repeating, the tools and experience never got in my way. Something I’ve not had happen when developing for other platforms. VS was nearly flawless and the debugging experience was nice. I did not however dig deep into the libraries included with Win8, I wanted to see how Win8 HTML/JS apps played with standards. Microsoft could have taken the route of having all the “goodness” hanging off of the WinRT libraries, but instead they have used the HTML5 specs for audio, localStorage, web workers and many other advanced bits. This was especially pleasing considering the past history of embrace and extend.
My verdict is Microsoft has a winner on it’s hands, at least technically, public relations is a whole different story. But there is a lot to offer a JavaScript developer. I have been continuing to develop my game and hope to have it in the store when it’s ready.
I think if you currently make web apps, especially if you want to make html5/javascript games then you owe it to yourself to give Win8 development a go.*
I will be posting a follow up to this on the generic developer experience as well. That should be in the next few days.
* If you install Win8 please install onto machine not a VM, I found that Virtualizing Windows 8 was an unpleasant experience and everything was almost unusable from Virtual Box on my MacBook Pro
A Weekend With Windows 8
I attended a Windows 8 “Hackathon” this past weekend and would like share some thoughts on Windows 8, and in my next post some thoughts about developing for Windows 8.
Now there has been a lot of negative reactions from people about Windows 8 because basically Microsoft moved peoples cheese. There is no start button, there are two environments and there is no close button for metro apps. So when things change people complain. How many times did I miss the start button over the weekend? Not once. Not a single time did I think to myself I really need that start button here. Why? Windows 8 makes it easy find apps. It’s actually easier to find apps in Windows 8 then it is to use the start menu. So for the people complaining about no start menu, get over it.
Metro versus the desktop. A lot has been written about switching between Metro and the desktop, and there are some legitimate concerns. While not jarring, or even distracting, every time I switched between a desktop app and a metro app I was reminded why Microsoft is moving to metro apps, an app isn’t about chrome, it’s about the app. An App should stand on it’s merit, and the os should get the hell out of it’s way. Metro makes that happen. Hopefully this will motivate existing app makers to get on to making metro versions of their apps.
How do I close an app? Grab it and dump it. Was easy when you see it done. There are lots of things like that in Windows 8. Once you know how to do something that becomes crazy simple to do. Microsoft will have to work at. Of course a few quick intro slides on setup would get it into peoples heads. It is that easy, but it’s only easy if you know about it.
There were lots of little things about Windows 8 that I like, things like the file explorer (that had a lot of nerd rage about the ribbon) that while had the ribbon, it got out of the way and actually gave me more room than in previous versions. Another thing is Live tiles in Metro. I love live tiles and Metro allows apps to establish an ongoing relationship with users without even opening an app.
It is a preview release, so nothing is perfect. But for a preview it was pretty solid and the only real issue I had was a mac bootcamp driver crashing. Here’s hoping that Microsoft can really nail this release. Hopefully I’ll have up a developing for Windows 8 post in the next day or so.
Auckland JS Follow Up
I gave a talk at the Auckland JS Meetup and I thought I’d put some links for some additional info.
For writing command line apps with Node.js
Using Titanium Studio with node.js
Extra credit
Hope this info helps someone and if you have any questions hit me up on twitter or email me kevin @ kevinisom.info
