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
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?
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.
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
This will ask you a few questions and create a package.json file. This file will hold your dependencies (among other purposes)
Then just install the grunt contrib jshint module
npm install grunt-contrib-jshint —save-dev
I will be building on that grunt file as this series progresses.
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.
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.
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.
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
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
There are a few tools that are helpful.
Like Chocolately, Homebrew is a package manager for OS X. It lets you download and install apps. How to install Homebrew from the wiki
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 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
As above install with homebrew $ brew install git
These are foundation tools that I will build off of in future posts.
Remember what Walter says
Game Development in Windows 8
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.
Following my last post on my time with Windows 8, I’d like to write about actually developing for it.
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.
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.
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.
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
Hope this info helps someone and if you have any questions hit me up on twitter or email me kevin @ kevinisom.info