Last night I attended London JS — Create the web, which was hosted at Forward Technology.
The first talk was by Jack Franklin and was called Optimising JavaScript.
It was only a short talk but Jack presented some interesting finds regarding how to do common things with JavaScript quickly. To see some examples of this go checkout his slides.
The second talk was more of a presentation on some of Adobes new products by Michael Chaize and Terrance Ryan.
It really looks like Adobe have stepped up their game and are now developing more web focused tools. They seem to be doing a lot with animation, but from the sound of their laptop fans I’m not sure the world is ready for that yet.
The two tools that impressed me were the yet-to-be-released Reflow and Brackets.
Reflow is a responsive design application which allows you to set breakpoints and rearrange the design accordingly. Effectively you are editing DOM elements rather than Photoshop layers. I really think a tool like this will help get designers thinking responsively, causing us developers a few less headaches in the process.
Brackets is an open source HTML, CSS and JavaScript editor. It has been designed to be lightweight, front-end focused and extensible. It is built entirely in HTML, CSS and JavaScript and therefore easy to customise and extend with your own plugins. One feature I particularly liked was the ability to select an element from a HTML file and edit the CSS properties for that element without opening another file.
Unfortunately I had to leave before Sam Duttons WebRTC talk so I can’t say anything about that.
I did come away with a free foldable me which I did put together late last night but have yet to photograph.
Leave a comment
I’ve just got back from the Full Frontal Tooling Workshops in Brighton, so I thought I’d best write about my experience whilst it’s still fresh in my mind.
The set up
There were six different workshops in total, with Remy Sharp, Rebecca Murphey and Jake Archibald each leading two sessions. They were structured so participants could attend any four of the workshops throughout the day. The topics were:
- Modularizing your JavaScript with RequireJS — Rebecca Murphey
- Writing Testable JavaScript — Rebecca Murphey
- Massive git — Jake Archibald
- It’s your Sass on the line — Jake Archibald
- Debugging — Remy Sharp
- Build Process — Remy Sharp
What to choose?
I chose the require.js, testable JavaScript, debugging and build process workshops. I didn’t opt for the git workshop as I use it daily and am relatively comfortable with it and the same goes for Sass (although we currently use LESS at Easyart). Whilst I’m sure they were great workshops, I felt I would benefit a lot more from the others, especially as they addressed topics that I have become very interested in lately.
Modularizing your JavaScript with RequireJS
We started with an existing project, which had several script tags linking to various JavaScript files such as jQuery, Backbone, Underscore and more. Rebecca then showed us how to use require.js and the AMD format to manage our dependencies and modules, and then going on to build the project with a simple command.
This got me thinking about the way our JavaScript is structured, and whilst it has certainly seen improvement over the past six months or so, it could be taken a stage further by introducing require.js into our process.
Writing Testable JavaScript
We have been focusing on Test-driven development quite a lot lately and have also identified that we need to be doing unit tests on our JavaScript so this topic was particularly relevant to me.
Rebecca introduced us to QUnit and explained the thought-process behind unit testing and writing testable JavaScript.
When carrying out unit tests, we are essentially asking the following question:
Given this input, do I get this output?
— Rebecca Murphey
This sounds simple, and really it is. The main thing to get your head around is writing JavaScript that is actually testable. Rebecca showed us some typical jQuery code, which was distinctly lacking in functions or output, and explained how it was very difficult to test, and went on to explain how to write JavaScript that actually returns something so we can test it.
Things don’t do things — Things announce things
— Rebecca Murphey
The process of writing good tests should be to make them fail first, and then write the necessary code to make them pass. Well written tests not only ensure that your code is actually working, they help you to write better code.
One point that stood out to me in this workshop was not to get too hung up on testing edge cases. Make your tests as thorough as they need to be and then if an edge case does occur, write the test, then fix the problem.
Later, we were briefly introduced to Mocha, a more advanced testing framework, and also shown how to integrate testing with grunt.js.
Debugging
Being a developer, I’m no stranger to the Chrome developer tools but I’ve never really used them to their full potential.
During this workshop, Remy introduced us to the concept of step debugging and setting breakpoints. I had come across breakpoints before but wasn’t really sure how I could use them to debug code so I found this really helpful.
Something Remy said, which I have heard quite a lot, is that if you are using alerts for debugging you should stop right now. console.log is your friend.
After a run through of the various tabs in the Chrome developer tools, Remy talked to us about mobile debugging.
Debugging code in mobile browsers can be a nightmare, but Remy showed us something called weinre, which basically listens to your ip address and binds itself to it, allowing you to open the developer tools on your machine and debug in your mobile browser.
One thing that was stressed was the importance of testing on real devices. Emulators are fine for getting a quick overview but if you are doing any mobile specific work, get real phones.
Build Process
This workshop was based around a tool called Grunt, which is, in its own words, a task-based command line build tool for JavaScript projects.
Grunt is very powerful and can take care of a lot of otherwise mundane tasks for you such as:
- Concatenating files
- Generating project scaffolding
- Linting your code
- Minifying your code
- Running unit tests
- Starting a static web server
These are just the built-in tasks. Grunt is still very new but despite this, there are already over 200 plugins available.
This got me thinking about our build process and how it could be streamlined using this tool. We currently compile, concatenate and minify our Less files using CodeKit, the same goes for our JavaScript which we also run through JSHint. This works for us, but can sometimes feel cumbersome.
The possibilities with Grunt are endless and I also feel like it would give us more control over our projects so it is definitely something I will investigate adding to our process.
Conclusion
I really felt like I got a lot out of these workshops today. It was a lot of information to take in but the key points all came across. I really liked the format and 90 minutes seems to be about the perfect length for workshop sessions of this kind.
I don’t know if Remy is planning to do something similar next year but if he does I hope I will be lucky enough to attend once more.
Leave a comment