I dun it! Zyring project summary…

Well, after a lot of blogging, coding, gawping at the console, googling obscure errors and swearing at my laptop, I’ve finally (almost) finished the Zyring Apartment Finder project! Normally I find American startups go a bit overboard on the “WOO! AWESOME JOB!” every time you fill in a text box or whatever, but this time after finishing this ~40 hour project I got this:

The rather low-key end of the project.


That’s a bit low-key even for my British tastes.

Anyway, it’s now time to look back on my introductory post and have a think about how things went…

General thoughts

Overall, I’m really impressed! Having a structure for the project made it much easier to stay motivated. Having no idea whatsoever how to do things gets demoralising fast. I’d never used the Angular framework before so I was worried that the tutorials would become impossible to follow… well, it definitely made things harder, and I had to do a bit of extra reading up, but it wasn’t a serious problem. I’m pleased that I was able to wire up a complex app myself, and I got to see a lot of new things on the way: communicating with the backend server, the MVC pattern, using an external API like Google Maps.

Obviously I’m going to need a lot more practice with these to really know what I’m doing, but I tend to like the learning approach of having lots of new things thrown at me, getting a rough idea of how things work, and then going back and filling in gaps. That last bit is obviously important: I don’t want to become someone who just knows how to paste a bunch of stuff together. I also got plenty of useful general HTML and CSS practice, used Bootstrap a bit more, and got my head round callbacks.

Last but not least, I think it’s helped a bit with me getting a job! In August I’m starting a trainee developer position. It’s at a local software consultancy which trains up graduates with limited programming experience (but generally some kind of technical background I think… lots of maths students at the interview). They seem to work on a very wide range of projects, so it should be a good opportunity to learn quickly and find out what I like doing. And as an extra plus, I can stay in the Bath/Bristol area, which I really like. I don’t have to move to London or Cambridge and tip piles of money into a hole just to afford rent!

I talked about the Zyring project at the interview, and I think that helped counter the interviewer’s natural suspicion that as a PhD graduate I wasn’t really serious about this career switch. It was good to be able to show I was putting my own time into a coding project and enjoying it rather than applying to jobs at random out of necessity, and I think doing something with an obvious real-world application shows that I’m capable of taking an interest in something less esoteric than neutron star physics.

OK, now for a few specifics:

Magic beans test

In my intro post I wrote:

At the start of this project, you download a ‘project scaffolding’ – a rather bewildering number of files and folders, with references to a lot of tools and frameworks – Bower, Grunt, Angular, Bootstrap… Zyring make it very clear that you don’t need to know what everything is from the start, which I’m fine with – I’m happy with approaches that throw you in and allow you to learn as you go.

However, there is a lot of this stuff, which worries me. Zyring say that everything will be explained in later tutorials, which is a key claim as far as I’m concerned. I’m not expecting to come out with particularly high-level knowledge of all this stuff, but if I’m poking around the filesystem at the end of the project and half of it still looks like a bunch of magic beans then I will be disappointed.

So, it’s now time to go through the filesystem systematically and see what I think now I’m at the end of the project. This isn’t just a silly exercise – if I want to make my own project along these lines, I’m going to have to know how to set it up myself.

I mainly care about the main app folder (which I’ll come to in a minute), but let’s look at the other bits hanging around in the project folder:

  • bower_components. This has the various packages I’ve downloaded for this app. There are a lot of them:
Long list of packages

I forgot to include kitchen-sink.js…

There’s a bit of rambling about whether that’s overkill later in this post. Anyway this passes the magic beans test as I recognise the files inside it.

  • node_modules. This pretty much all seems to be to do with grunt, which I still know very little about. On the other hand, this is not the focus of the project.

  • test. Some tests I know nothing about. Probably a fail on the magic beans front.

  • a few other files floating around. bower.json seems to list the app’s dependencies on various packages and appears to have been automatically updated as I added more packages. There’s also package.json which seems to be the same thing for the Node files. Finally there’s gruntfile.js, which seems to be some kind of configuration file for grunt.

OK, now let’s look into the app folder. Here we have:

  • images: this is pretty self-explanatory, just city images I added myself
  • scripts: my controllers and services go here. Again I made these files myself, no problem here
  • styles: my CSS file. Fine.
  • util: ooh, here’s some magic beans! There’s humane.min.js which is apparently ‘a simple, modern, framework-independent, well-tested, unobtrusive, notification system.’ Then there’s libnotify.css, which seems to go along with it. Finally there’s socket.io, which ‘enables real-time bidirectional event-based communication.’ Good to know! All this stuff seems to be connected to a baffling script at the bottom of index.html full of notifyToasters and socket.emit. I think this is something to do with requesting help… so Zyring-specific, not part of the project as such. I probably don’t have to care about it.

  • views: contains my views. Nothing to see here.

  • Finally we have good old 404.html, index.html and robots.txt.

So overall this isn’t too bad. test and utils are full of magic beans but are not really relevant to the project, everything else pretty much makes sense except maybe some of the grunt stuff, which is still recognisable at least. I think this is OK – my main worry was ending up with a completely incomprehensible project I had no hope of reproducing.

Minor gripes

Now for a few things I’m unsure about:

  • I’ve enjoyed learning the basics of Angular, but I’m still unsure whether it’s a good choice to be teaching noobs like me. I was already vaguely aware that the next version of Angular was going to be different, but now I know a bit about the framework I can see that the planned changes are extremely drastic. That syntax looks very different, and wait, $scopes going? Oh, and controllers are going too? Um, so what exactly is staying?

From what I’ve read, though, it seems like front end development in general is currently a chaotic mess of competing frameworks, and Zyring can’t really avoid making some kind of controversial choice. Codeacademy seem to have gone the Angular route as well, so I assume there’s some logic behind it? I’m really not in a position to judge, seeing as I know almost nothing about the other frameworks. From what I’ve gathered, Backbone and Knockout are less likely to be torn up and reinvented tomorrow, but also they’re smaller and have to be supplemented with more stuff? I suppose Angular offers beginners the opportunity to get something working fast? On the other hand, it’s not like it’s particularly simple and jargon-free. I have no idea really.

  • Look at that image with the list of libraries again – it’s huge! And a couple of them seem rather frivolous – do I really need that Masonry library with the clever-clever image positioning? I feel that using this massive range of libraries at the stage I’m at is going to get me into pretty bad habits of copying and pasting loads of cool-looking things together without really thinking about whether I need it. On the other hand, that Angular Bootstrap library had some useful features in it, and I suppose it’s good to know what’s out there. It’s not like I have to use it all in my own projects.

  • Some of the tutorials had confusing elements, but I covered those as they came up in the detailed posts.

What will I do next?

Given that I’m going to get all the programming I can eat starting in August, I doubt I’m going to go mad with new projects. Anyway, here’s a few ideas:

  • I may do another Zyring project because I enjoyed the first one, but I doubt I’ll blog about it. It’s definitely been worth doing – the notes are really useful to look back on to remind myself of things – but it does slow me down. The News Reader one looks good to me, as a long-term RSS addict (still mourning Google Reader :().

  • It would also be a good idea to try putting together some minimal CRUD apps with Angular, using this tutorial as a guide, to get more of an idea of the basics. Things that appeal: going through the movie app in the tutorial but doing it for books (this year I’ve started keeping a list of what I read, so I have plenty to go into it); maybe a simple flashcard app for German vocab. I’d have to work out how to make the backend…

  • Before all of this, however, my priority is probably a basic website/blog with Jekyll. I currently write these posts in a text file in Markdown, and then copy and paste them into WordPress, so I think Jekyll would suit me well. It would be a good chance to learn how to use Git properly (used it a bit before, but it was a while ago). Also, free hosting! A static site would still allow me to muck about with visualisations in d3.js if I felt like it.

Final thoughts

Nothing much more to add, just wanted to reiterate that I’m really glad there are companies thinking about this kind of bridge between basic tutorials and working on projects independently. It’s a gap that needs filling, and Zyring’s doing an excellent job!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s