After attending two jQuery conferences in the past, I was pretty excited to be a part of jQueryTO, not to mention the opportunity to check out the beautiful city of Toronto. It’s a great area full of good food, interesting places and lots of talented and intelligent web developers. As mentioned in the previous post, jQueryTO 2013: Day 1, this conference was extremely well run, and had some of the best content yet. Mike Behnke, my fellow co-worker and conference attendee, did an excellent job summarizing Day 1, so I’m going to focus on Day 2.
Widening your Javascript Application: Organizational Tips from the (Front End) Front Line – Alex McPherson
- Slides: http://slidesha.re/YR6NuX
Picking the right type of technology for the site you’re building can be a tricky thing to do, and this talk dealt with that well. A variety of sites were discussed that one might be attempting to build ranging from ones that don’t use any JavaScript at all to those that use plugins straight out of the box, have custom written JavaScript, and full-fledged web apps. Some of the key takeaways that I felt were really important (many of which I advocate for myself, when coding):
- Use the object literal format for your JavaScript
- Call an “init” function from your doc ready, and put all your initialization code in that function.
- Don’t duplicate code
- For complex and multi-faceted functionality, consider using modules (for a great write up on this topic, see http://requirejs.org/docs/why.html) – preferably AMD
- If you find yourself writing large blocks of HTML in your JavaScript, pull it out and use a template instead (such as underscore, moustache, handlebars, etc.)
- If you’re building a large single page app, consider using an MVC approach such as Backbone, Angular, Ember, etc. (see the next two talk summaries)
- And finally, use build tools! Don’t just reference multiple files in your code; minify, concatenate, use sprites etc. Grunt was recommended in this talk (and a few others), as a great tool for combining your project files
The Holy Grail: Client and Server – Tim Branyen
- Slides: http://bit.ly/YRchG8
This talk focused on how to optimize and run a web application on both the client and server using the same code base, the “Holy Grail.” It discussed why a Model View Controller (MVC) approach, such as Backbone.js, might be a good solution to that. NodeJS was referenced as a resource for sharing code between the server-side and the client-side. Once again, modules were mentioned as being a good use case for optimization on the client-side, and as was the prevailing sentiment, requireJS and Asynchronous Module Definition (AMD) was the recommended approach. Dealing with state changes via the URL was another issue. The hash-bang is commonly used, but is not optimal, as it cannot be read on the server, is not good for accessibility, and is just generally messy. Instead, bring in the MVC which allows the use of routes and view rendering. LayoutManager was referenced as a great plugin for Backbone to assist with this. The last key point was the use of hijacking anchors to deal with rendering both client-side and server-side.
AngularJS – talks from Pearl Chen & Alex Tucker
There were a couple sessions about AngularJS introducing the framework itself, and another getting into some specifics about Angular Directives. AngularJS is similar in style to many of the MVC frameworks out there for JavaScript, like Backbone and Knockout. It is very opinionated about how things should work however, which helps force better code organization, albeit into the Angular pattern. Angular includes functionality to update the view as part of the framework, like Knockout, but with functionality included for keeping the model in sync with a server model like Backbone. It really seemed like Angular took the best parts of Backbone and Knockout and combined them in its own opinionated way. After Pearl’s talk, Alex Tucker gave a talk on converting jQuery Plugins to Angular Directives, particularly jQuery plugins that manipulate the DOM or UI.
The Dev Process – collaborating with designers, prototyping, & how to +1 your dev knowledge while at work – Monika Piotrowicz
- Slides: http://slidesha.re/YRd61H
Probably one of the talks that hit home the most, and on a subject that I personally feel very passionate about, this dealt with how developers collaborate on a project with designers, as well as how to improve the development environment in your own company. I was really excited to hear about an actual implementation of designers and developers working side by side right from the beginning of a project, and to see it working well. Some things I really liked:
- Bring the developer onto a project from the beginning (or at least, early on), in order to have time to prototype and research. This will almost always make the finished product better, not to mention giving the developer a chance to try out new techniques and tools, and grow their skill set.
- Development can inform design! When a developer comes on early in a project and gets to prototype, the designer can create designs that work with the code, not against it.
- Hey, why not sit next to your designer? Designers and developers literally working side by side. Love it.
Some additional great ideas:
- Creative recess: essentially a couple days out of the month for everyone in the company to take time out of their regular project work, and explore new things that they want to play with, before actually implementing on a project.
- Weekly dev talks: all of the developers meeting to share new things they’re trying, bugs they’ve dealt with, or any other interesting topic they might want to bring up.
- Monthly demo days: teams can share with other team’s things they’ve recently accomplished and learned, as well as challenges they encountered.
Offline Mobile Web App Architecture & Design – Boaz Sender
- Slides: http://bit.ly/YRdg9o
Of course, you can’t attend a developer conference, and not have a talk about mobile. This one really pulled together a lot of the other things mentioned throughout the conference.
Some key points:
- Network requests kill your battery, therefore limit them as much as possible
- In order to limit your requests, optimize, minify and concatenate all of your files together as much as possible. Using a tool like Grunt can help you automate those processes.
- Use an MVC approach such as Backbone (with LayoutManager).
- Allow your app to be accessible when not connected to the internet by referencing the files needed to run it in the cache manifest.
- Don’t just copy native mobile UI component styles in your web app, because, well, it’s not native, and also they don’t always work the way you want them to, particularly cross-browser. For example, use a nav at the top approach, instead of putting it at the bottom.
Additionally mentioned, but not directly related, Boaz mentioned leaflet as one of the best performing mobile mapping library currently available.
The Future of the Web is 3D – Ross McKegney
- Slides: http://bit.ly/YRduNA
There are always a couple of talks that have one of those amazing demos that blows everyone away. This was one of them. It mainly dealt with the 3D technologies available to the web, and what you can do with them. Right now, that pretty much refers to WebGL, a JavaScript API for rendering interactive 3D graphics in the browser. Part of the reason that WebGL examples are so much slicker than other demos in the browser, is because it actually uses your computer’s GPU for rendering, creating a faster and smoother experience. All of the examples (to my knowledge) relied on using three.js, one of the popular 3D libraries out there. Be sure and check out the slides, and click through to the examples.
Be prepared for coolness.
The 2013 Frontend Diaspora – Paul Irish
Probably the most anticipated, this talk really capped off the conference nicely. Largely covering future as well as current chrome dev tools and features, there was plenty to take away. Paul started off with an apology for ever mentioning that people should worry about optimizing their CSS selectors–meaning, there’s no need. A better way of dealing with CSS optimization: take a timeline trace (keyboard shortcut: CMD/CTRL-E) and fix the things that are taking the most time to render. Another optimization tip: serve up your images at the size you actually want them. Don’t use up GPU on trying to render giant images, when you are actually wanting to display a thumbnail.
Then onto showing the upcoming request Autocomplete () form function that will soon be part of Chrome. This would use the autocomplete attribute that is already a part of form elements to streamline form inputting processes (like checking out when shopping online). Potentially a great tool for a mobile device, when users want to enter as little as possible.
Finally, the Dev. Tools. Some cool new features:
- One of my new favorites: pressing “H” while an element is selected in the inspector will toggle its visibility to hidden or visible.
- There are a bunch of great ones under Settings > Overrides, including emulate touch events, change user agent, update device metrics (as in screen resolution and font scaling), and override geo-location and device orientation.
- This one was actually mentioned in a previous talk I had attended, but got a big crowd reaction: the “un-minify” (or Pretty Print, as it’s called in the inspector) button.
- There were several experiments that can be enabled under about://flags, including “Capture Canvas Frame” under the Profiles tab. Click “Start” and you can see a trace log giving you a list of all the canvas calls made, and you can individually replay any of them.
- “Snippets” was another cool experiment: a multi-line console that allows you to write and save scripts right from the browser. You can also highlight a single line of code and choose “evaluate.”
A few odds and ends mentioned:
- Multi-device testing resources: opendevicelab, or deviceanywhere.
- Dev Tools Code School – a site to help you learn about the Chrome dev tools! Or check out the API docs.
Conclusion
As always, the jQuery conference did not disappoint. There was so much insightful content, so many new (and “old”) tools mentioned; I have enough information to keep me busy for months. In case you missed it from the Day 1 post, the links to available slides, audio and video of most of the presenters are here.
