2011.09.03

Single entry point redux

A couple months ago I posted about using a single entry point for JavaScript applications and how it could simplify the HTML logic and also make dependency management easier. A couple people asked if I had some example and the only examples I had were client projects which I couldn’t share the source code…

I’ve just answered a question on the RequireJS mailing list and used a Gist to explain how single entry point works and how it improves the code structure and simplify dependency management.

Here is a simplified example of how to have a single entry point for your app:

And how Crossroads.js can simplify the path resolution logic:

I hope this kind of pattern can help more people to build scalable applications. It certainly helps to avoid some hassles like working on files with 1000+ LOC or some error-prone concatenation scheme (my source files usually have less than 200 LOC). AMD isn’t just about lazy-loading/non-blocking scripts, for me the greatest benefits are being able to organize code across multiple files, be sure that all the dependencies are available before execution and also reduce the need of global variables and verbose namespaces. AMD FTW!

My code written with RequireJS is far more organized and awesome than any other #JavaScript I’ve written. – Ryan Florence

PS: use the RequireJS optimizer to combine all your source files for production, here is a basic example of how my build settings usually looks like.

Edit (2011/09/21): Added Crossroads.js example.

Related

Tags: , , , , ,
Comments (5)

Comments

Joshua Curtis
2011-12-23 17:32:41

I am trying to acomplish somthing a little like this but not matter what I do with requirejs crossroads is still coming up as null... any idea why this might be??

http://stackoverflow.com/questions/8618444/crossroads-js-and-require-js

Jordan Arentsen
2012-04-22 02:19:48

I've been trying implement the single entry point method, and I'm using your aforementioned build file as a reference. I'm having some issues and I posted to the requirejs google group. Any thoughts on this? https://groups.google.com/d/topic/requirejs/M_CjLHcMw9g/discussion

Jordan Arentsen
2012-04-25 03:12:21

Got everything figured out. Thanks again for this great blog post, just what my project needed. Cheers!

RequireJS 2.0 Delayed Module Evaluation and Google Maps | Blog | Miller Medeiros
2012-08-06 11:51:26

[...] Single Entry Point Redux Tags: amd, requirejs, tutorial Comments (0) [...]

Ben Nadel
2012-08-06 20:08:20

I really like the way you can add validation logic to the types of values that get matched in your route. Pretty slick! For a server-side app that I wrote, I had a module that "resolved" paths and returned a value like:

resource : "/some/resource/uri", event: "resource.view", attributes: { id: 4 }

... but then it was up to the consuming code to do things like validate that "id:4" was actually numeric. Being able to put that constraint as part of the actual route definition is nice!

Leave a Comment

Please post only comments that will add value to the content of this page. Please read the about page to understand the objective of this blog and the way I think about it. Thanks.

Comments are parsed as Markdown and you can use basic HTML tags (a, blockquote, cite, code, del, em, strong) but some code may be striped if not escaped (specially PHP and HTML tags that aren't on the list). Line and paragraph breaks automatic. Code blocks should be indented with 4 spaces.