Integrating 

RequireJS

HTML5DevConf 2014

Author: Parris Khachi
@parrissays

My 15 minute braindump

History

Life used to be simple

Then life got complicated

10 requests later our JS can now run

bundle.yaml/manifests

Sooo many files!!!

Game: Find the Dependencies

Answer: Some of these?

I think...

Ultimately EXCEPTIONS 

You forgot a file somewhere... 


Question

What happens when a dev needs to do this multiple times per day? And ultimately gets hit with that feeling?

Answer: I'll just not reuse any code ever. Maybe I'll just quit.

Or maybe

We'll fix it!

Enter RequireJS


Game: What are the dependencies?

How about here?

So wait... How did you integrate it at Eventbrite?

Questions that came up


- Wait it is Async? How does that work in production?
- How do you unit test now? How do you `x` now?
- How about all the legacy files? How does it integrate?

Lots of Research


CommonJS vs. AMD... what are the options?

Async? How about Production?

Loading hundreds of files separately results in poor performance


Enter App.js 


Benefits of Async Feature Loading

By reducing the initial file size we:
  • reduce js file download time
  • reduce js compile time on page load
  • modularize features

Example (multipage site, with common bundle and async): 
https://github.com/parris/example-multipage

How do you do `x`...

not a problem, there are online resources for every situation

Jasmine? Unit Testing?

Unit Testing PT2

Jasmine + Grunt

Handlebars

https://www.npmjs.org/package/requirejs-handlebars

Handlebars pt2


Legacy



The hardest part isn't technical actually


Communication


- Convince people it is complicated/unmanagable
- Show business value (faster development)

Ultimately you'll get skepticism...

Grassroots


this is obviously complicated (400 files, 300kb code)
this is complicated but less obviously so (~50 files)

No feathers ruffled...
The feathers didn't even know I was there.

Thanks!!


Question?


Oh yea we are hiring: https://www.eventbrite.com/jobs
Come by our booth!

Integrating RequireJS

By Parris Khachi

Integrating RequireJS

  • 1,340
Loading comments...

More from Parris Khachi