Scaffolding AngularJS SPA(s)

While working on many Web SPA projects, I frequently need to present concepts and rationalizations on SPA scaffolding considerations.

Typical Questions:

  • What client tools should I use ?
  • What is NPM and Bower ? And why should I use both ?
  • How should I structure my code to scale ?
  • Why would I need/want a NodeJS server ?

I often assume that everyone understands the phases and usages of tools and structures. And then I remember that my own learning curve was long and frustrating. So perhaps I can help other developers shorten (and reduce the stress of-) their own learning cycles….




Above is a slide-deck that I prepared to present concepts and recommendations for Full-Stack, enterprise AngularJS SPA development.

Slide topics:

  1. Full-Stack and development tools such as NPM, Bower, Grunt
  2. SPA source code packaging
  3. Present a middle-tier, NodeJS app-server solution with custom routing.

Scaffolding AngularJS SPA(s)

3 Responses

  1. Hi Thomas,

    Nice presentation. You might find this interesting. It is a comparison of generators people can use to start making an app with AngularJS. Rather than read instructions on the best way to do things, people can just use a generator which has all of that expertise built right into it. The only trouble is there are more than one of them to pick from. Hopefully this comparison can spare your readers a little evaluation headache.

    http://www.dancancro.com/comparison-of-angularjs-application-starters/

    It’s editable too, so your input is welcome.

    Best,
    Dan

    Dan Cancro June 19, 2014 at 4:42 am #
  2. Hi Thomas!
    I’m still on setting up the build process (grunt) for a huge (>10 modules) angular app.
    I’ve structured it by feature (=module) and use it with requireJS. The build is working fine – everything is packed in a single js file.

    This single file is my problem: it’s getting bigger and bigger. So the user browser the app and has to wait till the whole script is loaded.
    Wouldn’t it be better to pack each module for itself and load them lazy. Like when the user navigates to a route (=feature =module), ui.router should handle this in it’s resolve method. OR another solution: 1 build file for each module and load them deferred, like when he’s focusing a login field or deferred with a timestamp.

    Before I start playing with this options I wanted to ask you. Did you had problems/consideration regarding that?

    jowe June 16, 2014 at 8:57 am #
    • @jowe

      Your goal is a great one but alas AngularJS 1.x does **NOT** support lazy loading of modules… not without [some hacking](http://stackoverflow.com/questions/19134023/lazy-loading-angularjs-modules-with-requirejs).

      Here are some important questions:

      * How do you define *big*?
      * Where is your performance hit ?
      * What takes the longest to load ?
      * Are you concerned with startup delays ? – use a Splash Preloader
      * Are you worried about caching of scripts ?

      Thomas Burleson June 17, 2014 at 6:23 pm #

Leave a Reply