Screen Shot 2014-08-22 at 1.53.58 PM

We at appendTo recently hosted our inaugural Modern Web Conference. The two-day virtual conference for front-end web enthusiasts focused on the tools and technologies needed to build the modern web. We kicked off the first day with our Web Technologies track that was centered around web languages such as HTML, CSS, JavaScript other trending frameworks and libraries.

On day two, we delved into our Web Developers Workflow track during which we presented tips on which tools help to enhance workflow, increase code quality and let developers concentrate on true innovation without being bogged down by basic setup and ongoing maintenance. Here’s a breakdown of what was discussed during the event:

Day 1

The focus of day 1 was on sharpening your skills with the tools of the modern web, HTML, CSS, and JavaScript as well as any helper libraries or frameworks. Mike Hostetler, our former CEO and current Director of appendTo’s parent company Epic Creative, opened the day’s sessions with his presentation on the realtime MVC framework, Sails.js. Sails is a framework for building web applications built on Node and shares many common architectural patterns with Ruby on Rails, hence the name, “sails”. He went on to demo some of Sails’ great features such as web socket, HTTP-based controller routes, the ORM waterline for easily creating a data layer, as well as its flexible asset, pipeline. He also created a basic app showing off the power and ease of use it has similar to Rails.

Dave Methvin, president of the jQuery foundation, Dave Methvin, highlighted some of the features in jQuery that exist now. Dave showed us some really interesting features of jQuery and took a deep dive into the nitty gritty of older jQuery APIs.

Following Dave’s insightful jQuery presentation, Bess Fernandez, a front-end developer at Articluate, presented Bootstrap, one of the most popular HTML, CSS and JavaScript frameworks used today. Many people who were attending the conference who had not yet gotten a chance to see Bootstrap were very impressed and expressed their desire to go check out the framework after attending Bess’s inspiring session.

Perhaps one of the most mind blowing talks of the day was given by one of our Visual Design Engineers, Trevan Hetzel. The talk titled, CSS Can do THAT?, clearly had everyone watching while reeling in the awe of what CSS can do. He demo’d an entirely JavaScript-less page that used some amazing CSS hacks for doing things like page clicks, accordions, toggling content, and a navigation menu. It was pretty incredible to see what you can accomplish with nothing but CSS.

Doug Neiner, our Vice President of Products, gave a talk on events and messaging strategies in JavaScript. Starting off with the basic forms of events, he then continued to get increasingly deeper into architecting sites with messaging and events in JavaScript. He mentioned some client side messaging libraries such as [postal.js and monologue.js that can help build complex decoupled applications in JavaScript by separating references to parts of the application. By separating different systems of an application and communicating with messages, it’s possible to create a maintainable and testable application.

AngularJS is arguably the most popular client-side MVC framework around these days, so it’s no surprise that it made a presence at the Modern Web Conference as well. Burke Holland, a Developer Advocate at Telerik, entertained and enlightened us on AngularJS directives during his presentation. Angular, although popular, definitely has its complicated parts, and Burke really helped add clarity to some of the “computer sciency” things in Angular like scope, transclusion, and many others. His demos on creating reusable directives really inspired the viewers and clearly showed how powerful Angular can be once you get passed its initial learning curve.

Day one wrapped up with a presentation by Estelle Weyl. She capped off the day with a great talk on CSS3 animations. It was very cool once again to see the power of what CSS can do for a web application. She was able to demo some fairly complicated animations that require only a few lines of CSS and once again, the viewers of the conference were blown away by the things you can accomplish in CSS.

Day Two

The second day of the Modern Web Conference was all about tools that developers use to make our lives easier. Seven great talks were given on day two that showed the audience how to be more efficient when working with client side code.

Starting off the day was a highly informative talk on one of the most important tools of working on a team these days, Git. Jordan Kasper gave a very thorough run through of all that you can accomplish with the most popular DVCS (Distributed Version Control System). He demo’d getting started with Git all the way to connecting to GitHub, working with Git bisect, rebasing, and several other of Git’s built in tools. Everyone had a great time learning about Git and one viewer even said that Git was much less of a mystery to him now after having heard the talk.

I actually spoke during the second slot on day two about the importance of unit Testing your client side code. I covered the basics of why you need to unit test your code for things like bugs, design, and maintainability. I also talked about some of the different testing strategies that exist out there like TDD and BDD. TDD on the client side was definitely the biggest focus of my talk and I also discussed red/green/refactor while working with the simple test framework, QUnit.js. A few other tools such as Sinon.JS, plato, and Blanket.js were also presented. These tools can help ensure that bug free-ish code make their way into production and the time spent fixing bugs is lessened by focusing more on the code at the forefront of a project rather than after launch.

A lot of developers tend to spend the majority of their time in the Chrome developer tools, but Raymond Camden of Adobe aimed to prove that there are many great features of other browsers including IE11 that can also be a great help to developers by showing off the developer tools for Chrome, IE, Firefox, Safari, and Opera, and proved how each one can handle an error or some edge cases slightly differently. The audience was very surprised to see just how different the debugging experience can be from browser to browser, and was also enjoying the pictures Raymond had in his presentation as well as his awesome tattoos.

One of the most tedious parts of working with web applications is downloading and installing all the third party JavaScript files necessary for a modern web application. Starting with Backbone.js as the example since it requires both jQuery and Underscore as dependencies. Bob Yexley, a Senior JavaScript Engineer at appendTo gave a great overview of using Bower to manage an application’s dependencies. Rather than having to go to all the different third party sites, download everything, copy it into the right directories, etc etc, with Bower it’s as easy as bower install backbone. It’s much simpler to work with Bower because it works similar to NPM where you have a bower.json file that keeps track of the various libs that have been installed. This means you can keep your JavaScript dependencies out of your DVCS repo, and simply run bower install when you need them. He also exhibited how easy it is to add Bower to your library and make it usable by anyone.

It’s a good thing that there was a break after the Bower talk because Ryan Niemeyer, another Senior JavaScript Architect, stepped up to the plate and rocked it with a talk on Browser Memory Leak Testing. The “oohs and awws” were pouring in from the audience as Ryan de-mystified one of the most challenging tools in the developer tools of any browser, memory analyzing. He showed off and explained how to work with these tools, and how to prevent simple mistakes that can lead to memory leaks in your JavaScript code. Many of the things were as simple as removing event handlers as soon as an element is out of the DOM, which is something that is extremely common, but the browser clearly will hold on to memory if you’re not careful. He also showed off how NOT to use the delete keyword, but rather set variables to null to set them up for garbage collection.

No front-end application these days would be complete without some sort of automation. Whether it’s a library or a web app, it’s important to have something like Grunt or Gulp running tasks on your code such as testing, minifying, deploying, etc. Elijah Manor from Dave Ramsey in Franklin, TN showed off how easy it is to get started with Grunt. He showed off some of the popular plugins that you can easily implement in your build and also noted that there’s almost 3,000 plugins you can use with Grunt! This talk helped a few in the audience go from hearing about grunt to wanting to go try it out for themselves.

The final talk of the day was a very technical intro to a new vm tool known as Vagrant. Tim Ambler went straight into demoing this very cool new virtual machine system. He explained how you simply install VirtualBox, and Vagrant and can get started with a Vagrant setup file to tell vagrant to quickly and efficiently set up a virtual machine that latches on to your current system. There are many different images you can use from the Vagrant cloud or create your own Vagrant image to allow you to setup a server running Ngnix, Ruby, and Node in a matter of minutes. Vagrant looks like a great tool to manage a team of developers on different platforms because no matter what OS they are running, a VM will be created that the developers can easily connect to and run applications.

Conclusion

The first virtual Modern Web Conference was a great success and left me excited to go play with all of the new information I had amassed over just two days! There were so many new tools and frameworks presented that I couldn’t wait to try for myself. We’re looking forward to another Modern Web Conference next year to continue promoting how powerful the Modern Web is compared to techniques we were using not that long ago. It’s incredible to see how far we’ve come as web developers and designers and there’s no telling where we’ll be next.