Since its emergence a week ago on GitHub, the controversial web app Popcorn Time has become one of the most popular repositories on the entire site. Popcorn Time features a super-slick open-source UI for watching movie torrents. Information is pulled in from a variety of sources to create an experience that looks and feels like Netflix or Hulu. Popcorn Time is legal to download. It’s even legal to use it – as long as you’re not using it to watch pirated content. And since it’s open source (unlike Napster back in the early days of music file sharing) it’s pretty much out there on the internet for the long haul. As TechCrunch puts it, “Popcorn Time Is Hollywood’s Worst Nightmare, And It Can’t Be Stopped.” From a web developer perspective, I took a look under the hood to see what it’s made of. The user interface felt Backbone-y, and sure enough, the app is using a stack of Node.js / Backbone.js / Bootstrap. But right off the bat, I couldn’t help but notice this in the index.html file:
<-- Basic Dependencies --> script src="js/vendor/jquery-2.1.0.min.js" script src="js/vendor/underscore.js" script src="js/vendor/backbone-1.1.0.js" script src="js/vendor/marionette.1.6.4.js" script src="js/vendor/bootstrap-tooltip.min.js" <-- Settings Module and API Keys --> script src="js/vendor/settings.js" script src="js/vendor/config.js" <-- App Initialization --> script src="js/app.js" script src="js/language.js" <-- UI and UI-related Initialization --> script src="js/frontend/ui.js" script src="js/frontend/player.js" <-- Backbone Models --> script src="js/frontend/models/movie.js" <-- Data Sources --> script src="js/frontend/providers/cache.js" script src="js/frontend/providers/themoviedb.js" script src="js/frontend/providers/yifysubtitles.js" script src="js/frontend/scrapers/yts.js" script src="js/frontend/scrapers/scrapers.js" <-- Backbone Views and Controllers --> script src="js/frontend/models/movie.js" script src="js/frontend/views/page.js" script src="js/frontend/views/listview.js" script src="js/frontend/views/movie.js" script src="js/frontend/views/sidebar.js" script src="js/frontend/controllers/home.js" script src="js/frontend/controllers/search.js" script src="js/frontend/controllers/filter.js" script src="js/frontend/router.js" <-- Other Dependencies --> script src="js/vendor/video-js/video.dev.js" script src="js/vendor/videojsplugins.js" script src="js/vendor/dragwindow.js"
Yikes. That’s a lot of dependencies. I’m betting that using Require.js, so that the dependencies are only loaded when they are needed, would dramatically decrease page load time and speed things up. In other words, swapping out most of that with something like this:
script data-main="js/main" src="js/require.js"
I’m not working on this project, and I’m sure lots of other people could have pointed out the same thing. But the app is a slick example of using Backbone & Bootstrap together, and since the project is open source… the code could be repurposed for good, of course.
As for me, I’m still in the process of learning the ins and outs of Require.js. More on that to come.