Building Large Scale Apps with Angular and Breeze | John Papa

John Papa

Evangelist on the loose

Building Large Scale Apps with Angular and Breeze

...

Angular. Breeze. JavaScript and HTML5. These buzzwords have been getting a lot of air play over the past year. There are plenty of examples to introduce you to these technologies but how do you apply these to larger apps at your workplace? This is where I find an end to end tutorial and demonstration can really help.

One place you can look for a practical implementation is Pluralsight, where they recently published both Part 1 an Part 2 of my Building Apps with Angular and Breeze courses. These courses intend to serve as a guide to take you from zero to hero to build an app from a blank canvas. Along the way I share my thought process on what I choose to build first, what options I weigh, and how I write code and then refactor it as I go. It is one possible road you can take as there are many ways to build applications, and thus the solution is not what is important but rather the journey getting there.

spangz

Part 1 provides the foundations for you to build a Single Page Application (SPA) from scratch using JavaScript, Angular, and Breeze. It takes you from scratch with “file | new project” and all the way to a working application. Part 2 builds on top of part 1 to teach you the rest of what you need to know to build a SPA including how to prepare for scaling your app, repository and unit of work patterns, saving strategies, CRUD, model validation, custom directives, and much more.

spangz2

I hope you enjoy the series!

And if you want to see a glimpse on how i pair program with Ward Bell, a great friend and one of the brilliant minds leading the forefront of SPA development, check out our Play by Play video.

playbyplay

tags: angular breeze javascript patterns pluralsight
  • Dude Man

    Hi John,

    I wanted to let you know that I think your training material fills a large gap in the developer community and has been tremendously helpful to me in transitioning from a WPF/Silverlight developer. I applaud the pedagogical approach you use because it both demonstrates through action and reinforces through repetition. That is to say, the way you go back over already covered material before issuing in a new section definitely helps to reinforce concepts that would otherwise leave some struggling.

    It is my sincere hope that you will continue to be able to use your highly effective teaching skills to create the kind of quality training that has become such a time saver for those who are stuck in rush hour and struggling to catch the technology train.

    Nat

    • johnpapa7

      Nat,

      Thanks for the kind feedback. Good luck in the New Year!

  • Justin Dentr

    I assume Part 3 will be about Authentication / Authorization?

    • simon

      I sincerely hope so.

      • Khuzema

        Please do the Part-3 yourself :)

    • johnpapa7

      Justin – I hope to do a part 3 … depends on time (I have a full time job too) and if Pluralsight signs another author to do it. I’m sure it will be covered either way

  • miguel delgado

    Hello John:
    Is there a resource to use .Net Authentication with HotTowel Angular/Breeze?
    I’ve tried to use the SPA VS 2013 template but it uses KO and don’t seem to make a good fit with your HotTowel architecture…
    Thanks in advance.

    • johnpapa7

      Miguel – the auth in those examples should work fine here too. They are not KO specific. Auth is all server side.

  • Jon Alberghini

    I am a subscriber to http://pluralsight.com/training/Courses/TableOfContents/build-apps-angular-breeze.
    (jonalberghini). I really enjoyed the course but it would be great if
    it used the new version of bootstrap. Or an update for the hottowel
    package?

  • Matthew Berry

    Hi John:

    I really enjoyed your Part 1 course and found it really helpful to follow along line by line. There is nothing like actually typing the code yourself to force it into your brain!

    I have just started Part 2 and you reference “before” and “after” code. Is the only way to get this a Monthly Plus Pluralsight membership?

    Regards,
    Matthew

  • Paul

    G’day John, yet another awesome course mate, many thanks…. great to see Ward has yet to find a new hat lol :-D

    AngularJS UI Bootstrap 0.9.0 has just been released and supports Bootstrap 3, is it now safe to update our projects built with you angular templates??
    Cheers
    Paul

    • johnpapa7

      Yes, BS3 and UI-Bootstrap can be updated … though its not a simple conversion. I will be doing this in Feb and blogging but feel free to go for it :)

      • Paul

        Thanks John, I was thinking off the top of my head that most of the ‘not so simple conversion’ will be the metro theme itself and perhaps the toaster? I’ll hava crack at it to see how badly I can break things ;-)

  • satish

    Angular.UI-Bootstrap is now available for Bootstrap 3.

    https://github.com/angular-ui/bootstrap [v 0.9.0]

    Are you planning to upgrade your Angular-Hottowel template to use this new version?

    regards,

    Satish

  • Nicholas Stein

    I am going through Part 1 and am about to start a new Dashboard and Admin app for my SPA that I wrote a year ago using your Starter Kin with the Breeze, JQuery Knockout Require sammy stack. Durandal was just starting then. This app was a data capture app to get readings from the shop floor and is now in production. As a result of this app I dived pretty deep into how the stack works and made extensive use of knockout custom bindings to pull data into the app and populate the vms. The best thing about ko custom bindings is the ability to stop the app with the debugger during an event in the init part and inspect what is going on in the vm.

    Even though I understand the underlying frameworks pretty well, I am considering using Angular instead of Durandal for my new app. However, I really need to get this new app up faster and am reluctant to have to learn a new framework particularly because I have a lot invested in the older stack and adding Durandal to the mix would be faster than learning Angular.

    How tough is it to learn Angular? From the course, it looks like Angular stays in the background if I use Hot Towel.

    Can I use both Durandal and Angular in the same app? That would give me a fallback if I got stuck in some ui binding or some other technicality in Angular.

    Nick Stein

  • Pingback: How to Build Large Scale Apps Using Angular and Breeze | Best Windows Web Hosting

  • vcardins

    Hi John, how much RequireJs would be worth in CC? Would it be a good exercise to include it?

    • Greg

      I am currently attempting to do this but given the multiple angular apps it’s proving to be a bit difficult.

  • Edgardo Reyes

    Hi John,

    My name i

  • Edgardo Reyes

    Hi John,

    Great training course! I just have a question,
    do you have a way or technique on how this web application can be installed on my mobile device in a way like native apps are being installed? What I mean is if I go to Google playstore or Apple app store, I can download it from there and it will create an app or icon on my mobile device.
    Hope you get what I’m trying to say and thank you again for these great courses in Pluralsight.

    Edgardo

    • johnpapa7

      Yep, you are referring to PhoneGap (or more accurately Cordova). You’ll want to look into those, which help you create hybrid apps

  • Antonio Lockhart

    JP,

    Just wanted to say thank you for the course…I just finished up my first small scale web app using your techniques, and the client loves the “snappy” feel that comes from the SPA presentation. I have followed several of your courses on SPA presentation frameworks and was wondering why you have not demo using security features such as cross site scripting and user/identity management. As you have previously suggested,
    I have checked out some of the templates included with VS and from breeze — but all the examples seem to be missing the modularity and “just work” factors that you have demo in your courses. I was able to deal with some of these topics using traditional server technologies, but when it is paired up with your design techniques, it doesn’t feel as if I am “doing it right”…
    Can you provide some insight, maybe a blog post on the topic? Or even part 3 –> Refactoring Code Camper for BS3/UI 0.10, User/Identity Management / Angular Directives (Indepth Perspective). Thanks again and I look forward to hearing from you .

  • Simon Dowdeswell

    Hi John,

    I installed web essentials and can see functionality to bundle the angular html templates into a single HTML file. Is it possible to use such a bundle to pre-load the angular templates ? ie with bundled scripts you can use a script tag to get it into the browser, same with styles … but can you do a similar thing with the HTML bundle? If so, how.

    ( I found an article on how to do it with Rails, but I’m an ASP.NET guy …

    http://www.angularails.com/articles/how_to_speed_up_your_angularjs_rails_app
    )

    Ta,

    Simon

  • lakhdar

    And what about memory management in that Angular and SPA’s ?
    My IE9 and 1GB machine craches with your examples and they are only examples what about real world apps ?
    $http release resources so late
    $scopes are gnarled
    ng-repeat creates more scopes then dom elements
    dom event not removed
    Jquery cache overloaded
    so on….

    with server side pages at less you’l not break users machines ???

  • Greg

    Hi John,

    Part 1& 2 are a fantastic resource. I really like how you followed a “story”.

    One thing I noticed with the template is when the screen is made small so the left menu goes to the top of the screen and you select a menu option. The menu does not collapse after clicking on an option.

    There are no errors, it behaves this way for pre BS3 and with the BS3 update. In both chrome & ie latest versions.

    I believe it’s meant to fade but this class is missing from the template
    fade-selection-animation.

  • Jlar

    John is there any word if you will be doing a part 3 that covers Authentication / Authorization? I am really loving your courses but cannot figure out how to handle this in a single page app using your methods.

  • nilesh lagare

    My First RIA on SPA using Hot Towel – Hats off to John Papa

%d bloggers like this: