Archive for August, 2014

The learning gap in deploying Javascript apps

by Oliver on Sunday, August 17th, 2014.

I’ve recently been building a website for my wife using relatively modern tools – lots of client-side Javascript and relatively minimal CSS and HTML. A recent-ish email alerted me to the existence of a Berlin-based Famous framework meetup group, which initially made no sense to me, but after I checked out the actual framework website my interest was piqued. I’ve got next to no website building experience (at least from the front-end point of view), and what I would only describe as barely competent Javascript skills. Nevertheless it appealed more to me to learn more about this world than simply building a generic WordPress-based site and customising some stylesheets.

There are some great tools out there these days for Javascript learners, for example Codecademy. I used this myself to brush up on the weird scoping rules, function hoisting, manipulating the DOM etc. That’s enough to generally get you started with Javascript as a language and also in the context of execution in the browser which comes with additional constraints and possibilities. On top of that you have tutorials on using jQuery which are usually quite understandable and make a lot of sense if you have already learned about the DOM and manipulating content on a page. So far so good.

The Famous framework introduces a new paradigm for creating responsive, dynamic content on a webpage for both desktop and mobile devices. Fortunately on their website they also provide a bunch of tutorials which give you a pretty good overview of functionality and how to use the framework. Their starter pack containing further examples for most of the library functions also helps considerably. I took a few times to go through all of it and still find some aspects confusing but ultimately I was able to build a website that actually worked.

Great – now I need to run this stuff on a real webserver. If you have had even tangential contact with real front-end developers you have probably heard of such terms as “minification“, “Javascript obfuscation” and perhaps “RequireJS” or “CommonJS modules” and so on. I was already somewhat aware of CommonJS modules, having encountered them in front-end code for my company’s website and could see that they provide a nice solution to the Javascript scoping and code reuse problems. Fortunately, using the scaffolding provided in the Famous starter kit you get code that already has the CommonJS module pattern built-in, so building the website code followed this pattern from the start. If this hadn’t been the case, I’m not sure how I would have found some good examples for getting started with it.

The website built, I was only vaguely aware that RequireJS had to be part of the solution but left this part of the puzzle aside while I pondered how to minify the code. I could have just downloaded the famous.min.js file from their website and copied all the files to my webserver but I felt like this wasn’t how it is meant to be (but with no real way knowing the right way to do it). This lack of knowledge resulted in a frustrated mailing list post but ultimately no better solution. There was a suggestion to use RequireJS, and a lot more Googling on my part but I still didn’t make much progress. Eventually I decided I’d create a “vendor” directory, cloned the Famous repo into it and… got stuck again. I just didn’t know how to join the dots between the original Javascript code and a tidy single-file representation of the library dependencies and my own app code.

After a conversation with a coworker I was armed with links to such tools as Bower (which I played with a bit, before realising I still didn’t know what I was doing), Grunt, Gulp, Yeoman, and also found an interesting Hackernews thread that seemed to contain useful information but was still a little out of my reach. All these tools, but still I had no good idea what I needed to accomplish and how to do it. I decided in the end to just use the Yeoman Famous generator module and generate a Famous site scaffolding to see what such a thing looked like. This contained just a tiny example of Famous code but more importantly had all of the minification tooling, Javascript linting and build preparation and deployment tasks already baked in without having to build them from scratch. I copied the relevant parts over to my existing repository, fixed all the linter errors and ended up with the minified, deployable Javascript files I’d been hoping for.

I’m happy with the end result, but saddened by the apparent gap in learning possibilities for this part of the Javascript world. There are plenty of opportunities to learn basic Javascript, figure out how to make a static website slightly more dynamic and perhaps use some fairly standard convenience libraries like jQuery or Underscore but not much more than that. When it comes to building reusable modules with RequireJS or minifying, linting and building your code for deployment this feels like an area that suffered from problems felt acutely by long-time Javascript developers, that now fortunately have a variety of good solutions – and there has been a lot of rapid development in this area in the last few years. Sadly, getting learners up to speed with these problems and their solutions doesn’t seem to have kept up with the technologies themselves.

My recommendation: If you’re in a similar position to me, check out Yeoman and the generators available for it. Use that and build up your knowledge of how the individual components and libraries are used together by inspecting what scaffolding code it provides for you. I can only hope that we start to see more tutorials on Codecademy and other similar sites on Javascript deployment subjects and the problems that the tools mentioned above solve for modern websites.

Tags: , , , , , , , ,

Sunday, August 17th, 2014 Tech No Comments

Fitness and stuff

by Oliver on Sunday, August 10th, 2014.

A friend drew my attention to the fact that it has been around three months since my last post on this blog. Sadly, life has gotten in the way of my more technical posts – there have been a lot of things going on preventing me from writing more frequently. Vacation, how busy I am at work with various new responsibilities and a lot of features to deliver, team-mates to train up, learning some new frameworks so I can build a website for my wife, and a bunch of fitness training.

NOTE: I was going to embed my Strava widgets here but they don’t support HTTPS connections. For shame, Strava!

I’ve been associating more closely with the bicycle enthusiasts at work, who all seem to use Strava, so I’ve started using it myself. I’m not exactly a newcomer to the fitness application thing, but also not really an old hand at it. I think I started using eCoach (which I even contributed to) when I had my Nokia N900, and it eventually gained support for uploading events to Heiaheia, which I still use to this day:

Heiaheia was started by some ex-Nokia employees and seems to be relatively successful, at least in the sense that it is still around and supports modern devices like iPhone and Android. It lets you select from a wide range of sports, tracks time and/or distance aggregates, plots your routes on a map, allows you to set goals and measure yourself against them and the usual basic features. I don’t find it does much more than this sadly. Strava on the other hand is limited to only running and cycling (which is fine for me at the moment, as that’s the majority of my exercise) but adds a far deeper analysis of your exercises to this as well as something I can only call something like “automatic socialisation” of your exercises. It figures out where you went and compares your performance to anyone else doing the same thing at any time in the past. It even figures out if you and your friends (well, followers/followees) went on the same run or ride together, which is neat.

Other colleagues of mine that do more running are or have been using such apps as Runtastic or RunKeeper but I’m already feeling the burden of maintaining two apps. I have a long history of exercise in Heiaheia that I don’t want to lose, although I find the running and cycling support in Strava far superior. On the other hand I couldn’t track anything outside of these two sports in Strava to gain an overall view on my training time (since I’m currently also doing some general strength/agility training in addition to running and cycling).

The whole point, of course, is to build up to competing in a few events. Later this month I’ll be doing the 55km race in the Vattenfall Cyclassics on my completely self-built bamboo bike. It will also be with a bunch of colleagues from SoundCloud so it should be a lot of fun. Then in October I’ll be competing in the Hamburg Tough Mudder obstacle race (which is probably putting it very lightly). Training up for this latter event is really the main focus though, and it has also raised my interest in other similar events. I won’t list them all but a good page for information on the general topic is Mudstacle.

This year I turned 35, by which time you really need to be in good shape already or have a very good plan to do so, otherwise you’ll just find it getting harder and harder as the years go by. Fortunately in Germany they are fairly fanatical about health and preventative measures so they offer such things as health-provider-covered skin cancer checks, and comprehensive health checks. So far everything has come out looking good, so it’s just up to me to get back into relatively good shape so that I can continue feeling good as long as possible. I do miss kayaking, but if I can substitute these crazy obstacle races and general fitness training for it then I think I’ll be just as happy.

Tags: , , ,

Sunday, August 10th, 2014 Health No Comments