DevIntersection Fall 2014 Review & Notes

I was lucky enough to go to DevIntersection Fall 2014 in Las Vegas for my employer, Paylocity. Going to conferences can be a tough sell for a lot of companies, the perception is that it’s just a time to goof off on the company dime. Paylocity sent 12 people to DevIntersection, I am not denying that we didn’t have some ‘team building’ but the caliber of the talks and the speakers was more than enough to hold focus during the day.

So why DevIntersection in the first place? I have been to a number of Microsoft conferences in the past, usually PDC\Build conferences but I’m starting to sour on those. Conferences put on by one technology company are usually just week long polished sales pitches for their new and upcoming stuff. Rarely do you get a speaker with clarity to break the 4th wall and give you the ‘no-bs’ assessment. I attended my first DevIntersection around 2007, then it was at the Mandalay Bay and the Alt.Net movement was popular, but shunned by Microsoft. At that conferences in 2007 they has a Alt.Net track, much like this year they had an Anglebrackets track (i.e. JS/Angular). DevIntersection, to me, has always been Microsoft focused, but neutral ground. Your going to get the polished sales pitch from some of the speakers, but most everyone else speaking will give you their perspective as they see it.

I went mostly to non-Microsoft talks, focusing on AngularJS and Mobile mostly. Below are my notes for some of the talks I attended, I didn’t take notes for all talks and at least one talk “How to Interview a Developer by Billy Hollis” will spawn it’s own blog post. Nothing will beat seeing these people in person, so if you ever have the opportunity take it. These are just some some of my simple notes, not intended to be the full content of the talks and may contain errors due to lack of sleep and alcohol induced entropy.

AngularJS in 60ish Minutes by John Papa

Great talk by John Papa (as usual) about AngularJS. This was a 101 level talk, but there was a number good nuggets of information sprinkled in. John has his Angular demos on GitHub.

1. Brackets is a great new editor that understands Angular and web development, more than just simple IntelliSense.
2. Use the Factory angular method for creating objects will result in a singleton. I’ve heard conflicting information on this, but all the overall jist of it is that if your creating services for injection factory is your safest bet.
3. As of Angular 1.3 you can use the “controller as” syntax instead of $scope, this will ease conversion to Angular 2.0.
4. Use JavaScript IFFE’s to scope variables and working areas for service functions to keep them from polluting the global namespace.
5. Utilize ngAnnotate to generate injection code on a Grunt or Gulp task, this prevents you from writing injection code by hand and make it safe to obfuscate/minify the JS.
6. Plato, a JavaScript Source Analysis tool.
7. John’s recommended setup for AngularJS testing was Karma to run Mocha.

Full Stack Web Performance by Nik Molnar

This was one of the best talks at DevIntersection. I could not take notes fast enough for this talk, and he probably could have talked for all day easy about this subject. The overview of the talk is to make our web pages Jank Free by utilizing the Chrome Dev tools. Again this was amazing talk packed with great content, I would recommend catching Nik or his partner Anthony van dr Hoorn on any talk about web performance.

1. As web developers we hardly, or never, think about the hardware painting/rendering of our site. But this can be a huge component once you have fixed the ‘low hanging fruit’. Lets assume the monitor and graphics card are on a 60Mhz refresh interval, which means screen repaints will come every 16ms, this is our ‘window’ to get new content put on the screen. If you miss the window, say your work takes 25ms, you drop the 2nd frame, then waste 11ms doing nothing unit another refresh comes along. The goal, is to get your work done quick enough that you don’t drop any frames or waste any time.
2. You can think of this as FPS, I’ve heard that 24FPS is ‘human smooth’ but according to Nik 60FPS is the target to avoid any Jank.
3. There is about 300 bytes average of TCP overheard per request. When your thinking about mobile applications on cell connections each request that is ‘out of proc’ or leaves the device is extremely expensive.
4. DNS resolution for uncached DNS queries is around 150ms, utilize <link rel=”dns-prefectch” href=”[Domain to prefect here]”/> to ease resolution pain.
5. Utilize the Chrome Dev tools, there is an audits section that will run through most common issues, great first place to start on any webpage when trying to figure out performance issues.
6. In ASP.Net apps utilize <urlCompression doDynamicCompression=”true” doStaticCompression=”true” /> to force dynamic and static compression.
7. In Visual Studio, using the Web Essentials extension, you can create a sprite for all images in a directory by right clicking on the director within Visual Studio. This will also generate the css based on the image names.
8. When writing JavaScript do not attached unneeded variables to the window object, that just slows down passing of the window object around. Additionally utilize local variables over global scoped ones to avoid JS issues and additional baggage.
9. In JavaScript don’t use the window object in a closure, as it will pull all the properties down for it (see #7).
10. In JavaScript avoid for…in loops, not optimized use for instead.
11. Avoid “Layout Thrashing” where you globally change styles or apply classes. If your applying styles in a loop pull the html element into a var outside the loop, else the DOM may be marked dirty and you have to wait for a recalc before you get a good value.
12. In Chrome Dev Tools, you can “show paint rectangles’’ to see what elements on your page are painting.
13. In Chrome Dev Tools, you can “Enable continuous page repainting” to have chrome repaint the page in the loop, this will allow you to modify say, CSS styles, and monitor the resulting fps change.
14. The Chrome Dev Tools timeline is where you can view what your page is doing. Use “Frames Mode” the icon that looks like a bar chart, to turn that on. If your seeing lots of Green that’s a a lot of CSS transitions issues (color, effects, etc). If your seeing lots of Purple that’s lots of layout work (size of objects and positing of objects). A composite green color is a good, it’s done by the GPU. Some GPU optimized operations are fading, resizing, moving, rotation, opacity.

Lessons Learned from a Large AngularJS Project by Scott Allen

This was another amazing talk, I think I blew up my text editor on this talk as well. Lots of the Angular stuff out there is very simple, so I was extremely interested in hearing from the front lines of a large project. Scott has his Angular demos on GitHub.

1. Use .catch() off the promise as an error handler. Log locally to the console any useful information.
2. Catch at the top of the chain, for example at the Controller, not the Service/Factory. This will give the most contextual information.
3. Create a common error handling factory, use it to keep error handling and reporting consistent and uniform.
4. Use Decorators and Interceptors to add in common framework code, like Authorization. Extend Angular to become a custom framework in this way, Angular is the base but you can extend it in amazing ways to meet your projects goals/needs.
5. $sanitize will strip out html passed in to elements and events JS that could cause issue or be a security concern.
6. $interpolate is what’s used to evaluate handlebar directives (i.e. {{scope.myValue}}) it can be extended to give binding logging information.
7. You can utilize dashes and underscores and angular will strip them out on evaluation. For example, I could have a directive named rgMyDirective in JS but call it as <rg-MyDirective> in html. Do not prefix your with data or ng. It’s recommend to prefix your stuff as it will also prevent collisions with external dependencies you may bring in.
8. Avoid $rootScope abuse (i.e. try and avoid putting anything in $rootScope), instead create data factories that allow for transporting common data back and forth and properly manage the life cycle.
9. According to Scott everything in Angular is a singleton, i.e. factory and service, but pick one and roll with it, most use factory.
10. Avoid promise abuse, $q.when will create a promise for you, no need to create $q,deffered first.
11. If you return an object from a .then Angular will automatically wrap it in a promise for you, no need to manually create one.
12. Utilize UI-Router instead of the default router.
13. Look at utilizing BreezeJS for your data calls, it gives you caching, configuration, offline data, etc by default.

Getting Fancy with VS and Cordova / Mobile Technologies by Lino Tadros

First off, seeing Lino riding a mechanical bull at the VS/ComponentOne Mixology party is one of the most amazing things I’ve seen. Much, much props to him for doing it. I went to two of Lino’s talked on mobile technologies as they were near and dear to my heart. Below is what I learned from the master himself.

Which mobile technology should I use for my mobile app?
Use the technology your team is most comfortable in. Don’t be ‘pushed’ into a direction because of speed, security, hype, whatever. Most comfortable in C# and XAML? Use Xamarin Forms or straight Xamarin for just C#. Objective-C/Swift, native XCode, Java? Eclipse/Android Dev Studio, HTML/JS Cordova.

If your pushing native because of speed your missing the point. Native will always be faster, but a well-designed hybrid/Cordova app will get very close to a native one, so much so that your users most likely will never know.

Visual Studio 2013 Update 4 and VS15 will have built in support for Cordova development with great tooling, a great Android emulator and a the ability to hook into a Mac for building iOS apps.

Any app can be performant and be secure. The reverse is also true.

Summary

I’ll be blogging about Billy Hollis’s “Developer Interview” talk and Scott “the Lesser” Hanselman’s ASP.Net vNext talk in the near future. Overall this was a great conference full of amazing speakers. If you can go (they have 2 a year) I wholly recommend it.

If you’re a developer looking for a company that invests back in you by sending you to conferences, paying for training and lots of other stuff check out Paylocity. Chicago and 100% Remote positions always available.