If you’ve heard of SenchaCon it’s exactly what you might imagine, a big gathering of Sencha Touch developers partying, networking and learning more about Sencha Touch (I do hope to attend one myself soon!). Sencha Touch recently announced their 2014 convention, but at the same time resurfaced some of the best videos from the 2013 convention. I’ve compiled and summarised the presentations that I found most interesting.
#1 Advanced Tips and Tricks for Debugging by Steven Roussey @sroussey
Don't Get Bit by the Bug: Advanced Tips and Tricks for Debugging from Sencha on Vimeo.
The first thing Steven brings up is some tips when inspecting using the browsers debugging tools. Judging by the stunned “Wow…” from Steven as he asked the audience who was familiar with using $0, $1 etc. in the console, I can imagine this was news to the audience as much as it was to me. If you type in $0 in the console it will return the element you are inspecting and you can run commands like $0.innerHTML as well. The rest of the video is filled with great tips and I’d highly recommend giving the whole thing a watch. Here’s a summary of a few interesting things though:
- If you’ve got a chunk of data you want to output nicely you can run console.table(data) and have a nicely formatted table returned back to you. There’s a lot of other functions available that you can use as well.
- Firefox Native Devtools can give you a 3D view of DOM depth on your page. So if you find some towering skyscrapers in this 3D view it might be a sign that your page could use a little optimising.
- For perfomance critical code don’t use: try…catch, for…in, global scopes and don’t change the type of a variable.
#2 The Building of FastBook by Jacky Nguyen @nktpro
The Building of Fastbook from Sencha on Vimeo.
I’ve blogged about the FastBook application the past, it’s an impressive application that mimics Facebook’s functionality to show off what HTML5 is capable of. It’s a really great example, even though it is extremely advanced (it’s certainly over my head) – check out the link above for the demo video (the demo video is also contained within the video above if you’re planning on watching).
In this presentation, Jacky talks about some techniques that were used that made the application so performant and a rival to the actual native Facebook application. This is another awesome video that you absolutely have to watch, some of the key points raised in the video are:
- Managing a lot of data with a variety of content and unknown item sizes is a challenge
- We need fast data loading and fast data rendering
- HTML5 and Web Views were not the problem with Facebook’s original HTML5 application, it was their poor implementation
- In an infinite list, data should only be loaded in as it is needed and components should be reused or recycled when they are no longer in view
- Jacky Nguyen is an extremely talented individual
#3 Sencha Touch Best Practices and Component Architecture by Tommy Maintz @tmaintz
Sencha Touch Best Practices and Component Architecture from Sencha on Vimeo.
In this video Tommy looks at how to to build a custom component in Sencha Touch and some best practices. I’ll likely write a blog post on this topic soon (sorry for the lack of summary!), but this video will far outdo anything I put up.
#4 Sencha Touch Debugging and Performance by Jamie Avins @jamieavins
Sencha Touch Debugging and Performance from Sencha on Vimeo.
I recently wrote a simple blog post about some ways to fix common errors in Sencha Touch. In this video Jamie looks in depth at debugging Sencha Touch applications and performance issues. Specifically he talks about:
- Working with the DOM
- Working with JavaScript
- Network and Resources
- Environment Customization
Here’s a few things from his presentation that stood out for me:
- When styling use ems rather than directly using pixel sizing. This allows your application to scale much more easily.
- You can add a ‘Break On’ attribute to individual DOM elements to detect when changes occur
- Put ‘debugger;’ at any point in your application to trigger the debugger.
- …or if you don’t want to save these statements in your code, you can add them through the ‘Sources’ tab in the debugging tools
- Use Safari Debugger over USB for iOS and Webkit Remote Debugger over USB for Android to debug on the device
- Use the Timeline to track down performance problems in your application
- Add ?showfps to the URL bar to track the FPS of your application (it will appear in the bottom left hand corner of the screen)
There were a lot more videos that came out of Sencha Con so if you’d like to check some of them out, Sencha’s blog post on the topic is a good start. If you enjoyed any of these videos please take the time to follow them on Twitter and give them a shout out for the awesome content they’ve provided!