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.
- Slides: http://slidesha.re/YR6NuX
- 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’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
Choosing a Global Software Development Partner to Accelerate Your Digital Strategy
To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.
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.
- Slides: http://bit.ly/YRduNA
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.
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.