Straight to the Source (set)

Lately, in the front end web development world, it’s becoming easier and easier to create really cool things.

Frameworks like Angular and React (no personal experience with the latter, but heard it is great) do a lot of the hard work of keeping track of all your different views and routing.  And old faithfuls, like jQuery, make manipulating the DOM much easier than it used to be (speaking as someone who never really had to do it ‘the old way’- thank you!).

But with those improvements in tooling and frameworks, comes more pressure to truly make really cool things.  Gone are the days of impressing users with some scrolling text in a marquee tag.  Now we want bigger and better and more beautiful.

And it has to be fast.  I can never remember the actual number, but Amazon is quoted (somewhere) as saying every 2ms lost on page load costs them some crazy amount of money.  It’s tempting to look at this as an unimportant issue- as our apps become more functional, and larger, browser technology has improved to handle the extra load.  The crappy jQuery spaghetti mess I’ve made of a recordkeeping app (see other blog posts) loads like lightning on Chrome.

But for most apps, and most users, mobile is king.  The ‘every kilobyte matters’ approach is vital to ensure an app or site loads properly on mobile, or for users with slower internet speeds.  Lately I’ve been learning more about build tools.  Grunt seems to be the most straightforward- and can even minify/concatenate Angular project files if you ensure the function parameter names are correct, and concat them in the right order.  Other tools, like the srcset image attribute, cut down on one of the real killers of app/page size- images.

Srcset (and the awesome fallback, picturefill) allows you to pass multiple image src strings (with width breakpoints) to tell the browser which version of an image to use.  Preventing your 350kb hero image that looks so great at the top of your app on a huge desktop monitor from loading on an iPhone- srcset tells Safari to grab the tiny, 25kb image instead.

Lower page loads, faster load times- there’s a slogan for a library in there somewhere.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s