In September of 2013, I had the pleasure of giving a talk at the first-ever BlendConf in Charlotte, NC. It was an awesome conference, and I'm hopeful to at least join in on the festivities again later this year.
Below is the video of the talk I gave at BlendConf called "Modular Development with RequireJS." It's not focused only on RequireJS, but starts off taking a look at some problems that front-end developers and development teams are facing today. It then goes on to briefly explore a couple modular patterns and principles before moving on to examine a couple modular development approaches we can take today. The focus of those approaches will be on using AMD and one of the implementations of this spec, RequireJS. Hope you enjoy!
This weekend we watched the movie, "Now You See Me". I don't want to give any of the plot away, because I really enjoyed the movie but short story it involves 4 magicians. However, there was a line repeated a few times that I loved, "The more you think you see, the less you actually notice."
Wow, right? Okay, maybe not right away.
Later that night, I posted a short tweet just saying I enjoyed the movie with that quote in it. After posting, I thought to myself how appropriate that could be for the world of design and development.
The whole idea that we attempt to attain is that our users become immersed in our applications. We want the same thing that a magician does. We want our users to be engrossed in the experience of our application that they don't notice the pieces were pulling from here and there.
How do we bring this "idea" into our world of front-end development? Here's a few thoughts of how we can code for better experiences. This in no way is an attempt to cover the gamut, so please add any comments you have below.
Just-In-Time Initialization (JIT)
First off, what is "just-in-time initialization"? You can think of it as a sort of lazy evaluation. Many times on our pages, we like to get everything set up and initialized right from DOM ready. We want everything setup and usable, but we don't always take the time to consider how the user utilizes the application.
By setting everything up, we are being a burden to our page load time. The goal here is to bring the audience in closer, right? "The more you see", remember?
What we need to do, is capitalize on user behavior to initialize the pieces necessary Just-In-Time. The question is, "how do we do that?" There are several approaches you can take, but we'll try to cover a short example here.
For our example, let's use something like the following form:
In the form above, there's several things going on. Thinking from a normal state, this is what might be happening on DOM ready:
Loading our validation library.
Binding events to trigger remote calls to validate username
Set up of functionality to show the password as plain text.
Set up any particular events based on validation types of our inputs
There may be more, but you can see we're doing an awful lot up front. What if the user never even uses our form? Then we've wasted the bandwidth and memory to put something up that the user never even interacts with.
This is where we can leverage building an HTML/CSS facade. This facade can provide the user with the same entry point as the image above. However, as they "get closer, the less they actually see." (See what I did there?)
With our facade in place, we can leverage a one time event like a focus on an input field as a trigger to let us know that we need to set things up and get pieces ready. As the user is drawn in, they can simply experience the masking and un-masking of the password without knowing that there's work going in behind the scenes.
This is a simple example, but by leveraging this type of approach we can make better use of our resources, speed up our page load times, and provide the user with a more immersive experience in our applications.
This may be a bit of a stretch, but it can create the illusion that multiple things are going on when we can utilize the same functional code. Think of it like this, we have a particular object - say a snack - and we want to display it in different forms. Maybe in a list view, and individual item view and maybe a gallery view.
Looking at it there, we are most likely going to have 3 entirely different markup structures. The list view is most likely going to be inside of an li where the individual view may be contained in a div or a section tag.
Let's look at a simple example of maybe what our individual snack would look like in a list view:
The above forms a convention that depends on two points:
A container with a class of snack
A container with a class of name to hold the snack name (this of course could be optional in certain views)
A couple links - Edit/Remove - for snack management (again, these could be optional).
This will make your code more maintainable and also accomplish the illusion of multiple things happening while utilizing one piece of functional code.
As you can see, we have a completely different approach to the HTML and the user is going to get an entirely new view. However, we can still utilize any functional code the same way.
These are just a couple ideas of how we can bring the idea of "the more you think you see, the less you actually notice" into the world of front-end development. We could talk about leveraging user behavior, events of user intent and several other topics. If you have any comments or additional ideas post it in the comments.
I'm home from devLink and it was fantastic. I had the awesome opportunity to do a full-day workshop on Advanced jQuery Techniques with my friends at appendTo on Tuesday. The workshop was great. We had about 50 folks in my session and even though I ran long, the attendees wanted to hang in and we covered a lot of great material.
The rest of the week, I was helping where I could but mostly attending sessions and hanging out with some really awesome folks. There were several really great topics covered that were right up my alley.
Nicholas Zakas gave the opening keynote on Wednesday and covered some of the history of the browser wars and reminded all of us (and showed some who may not have experienced it) how far we've come. Scott Hanselman from Microsoft gave the second-day keynote and it was great as well. Hanselman is an awesome speaker and draws you right in to what he's talking about.
Overall, devLink was a fantastic conference. It's a pretty large conference and has some of the most reasonable ticket prices you'll find around. The community and attendees that came to Chattanooga show why our industry is the best in the world to be involved with.
Now, it's on to BlendConf next week where I'll talk about Modular Development with Require.js.