SPA JumpStart – Beginning SPA – Part 1 | John Papa

John Papa

Evangelist on the loose

SPA JumpStart – Beginning SPA – Part 1

...

It’s almost here! I can feel the end approaching for my new beginner level SPA JumpStart course for Pluralsight (hooray!). I think you’re going to enjoy it as much as I enjoyed creating it!

I am targeting for it be available mid March 2013. This course fits in nicely to jumpstart SPA development and get you moving quickly and efficiently. This is an end to end course that starts from File | New project and builds a fully functional SPA with multiple pages, insert, update, delete, validation, and more. I’ll reveal much more about the course in this blog post series. And yes, it will include Hot Towel and some of the new Visual Studio SPA Templates too :)

For now, here is a quick video I compiled to demonstrate just a small piece of what you will be able to build after watching my new SPA JumpStart course.

Approach to My Existing Intermediate Level SPA Course

And now for some background context …

When I set out to record my intermediate level SPA course, I purposefully demonstrated how to create all of the code, why I went town those paths, and hand crafted much of the code. The code was involved in some cases (think the data service module and its related modules) but it got across the point: you can build a robust app as a SPA without any magic. At the time, and to an extent still today, SPA was widely a misunderstood or unknown. Thus, the approach I took was purposefully targeting a wide spectrum of possibilities that you can explore with a SPA. I also avoided magical frameworks that “do it all” for you, because the journey (in this case) is more important than the end result. Otherwise, I could just show a wizard :)

This approach was arguably successful, and somewhat unconventional. The problem is that I started the story in the middle of the book, which caused some to wonder how to start. I totally get that and that’s a problem I can deal with and have addressed with my new course SPA JumpStart.

Approach to My New SPA JumpStart SPA Course

I cover tools in my new SPA JumpStart course that handle most of my data management and view and viewmodel composition. These tools are fantastic and hide a lot of the complexity that I hand rolled into the intermediate course. I also demonstrate some NuGet packages and Visual Studio 2012 Templates that I think you will really like, as I created these specifically for this course. I’ll explore these and many other areas through the course and this blog post series.

Tell Me Again?

To sum up the differences, this course provides a beginner’s jump-start to getting running with a SPA quickly. You’ll have all the fundamentals in place and get to join me in walking through building all of the code with me. The intermediate course covers more topics, how to build more of the components manually, discusses many of the choices you can make, and covers some scenarios in more depth such as HTML5 Boilerplate, Web Optimization, Web API design, building rich data capabilities manually, and Responsive Web Design (and more).

Or for a really short summary:

  • SPA JumpStart –> Teach me the core and “how”
  • SPA Intermediate –> Teach me more depth, more topics, and more “why”

SPA Jump-Start Series

tags: javascript pluralsight SPA
  • LastTribunal

    Great News John!!
    You are my hero!!!!!

  • Blaise

    I just hope we can have more discussion on Durandal and Breeze. The information from the HotTowel template is so limited. Although having figured out a lot of things in the past few weeks, I cannot wait to see your course published.

    • John

      Blaise – There will be. Hot Towel is a template not a course, nor a demo.

      • Blaise

        Thanks John. I learned a lot from your courses. I just started to use breeze and durandal since you you included them in HotTowel. The whole architecture is so different with BreezeController in place. It is easy to realize why your prefer breeze over amplify. But I am still struggling with it. Evangelists like you are in great need!

        • John

          Blaise – Your perspective is totally understandable. I’m glad you are researching SPA. Breeze controller is just a convention that the Breeze folks use, but you can deviate. But I like the “happy” path :)

  • Nat

    Hi John,

    This is fantastic! I really appreciate your courseware and hope that you will continue to keep turning out this type of quality material for as long as possible. Most .NET Devs need a huge leg up in coming to terms with recent innovations in web application development, so you and others are providing a wonderful service in helping us get there.

    I’m about half-way through Manning’s new book “Single Page Web Applications”. It’s not an easy read and it has meant quite a paradigm shift in thinking. However, I keep wondering what benefit there is in building an app their way over using a framework like Durandal. Is Durandal your first choice when it comes to SPA frameworks now?

    • John

      Nat – Thanks for the feedback, that’s great to hear. I have not read that book so I can’t speak to it. I do personally prefer Durandal/KO/Breeze. But custom or AngularJS is also a good choice.

  • LastTribunal

    This SPA business is somewhat analogous to the invention of the Calculus. For 200 years the tecnological world stood still as it awaited Newton/Leibnetz to take it into the realm of Infinity. Mr Papa, for all practical purposes you are to web development, what those were to the calculus. This is a historical moment!

  • Nik Ivancic

    I “invented” a version of SPA some 8 years ago, by creating a single (main) ASP.NET page with a menu and created the rest of the application as a large number of User Controls that are dynamically loaded in the main page “place holder” as a consequence of the user interacting with menu. So the secret of this new SPA “thing” is not in being a single page, but rather that the application is written in JavaScript.

    Due to nearly magical power of JavaScript now we can avoid the mess created by my ASP.NET (2.0) SPA, where the “code behind” that one page is many thousands of lines long trying to manage the state of a complex application in a stateless world.

    My point is that people like me (fluent in many declarative languages) need to lose the perception how JavaScript is just like C with a weird syntax and be ready with a steep learning curve to master the most misunderstood language today (which is also the most widely used language as well). Learning a functional language after dealing with declarative languages for a long tome, takes time, effort and persistence, but without that effort, there is no chance to be really able to deal with the whole family of tools that SPA approach brings to the table)

    I found the books and videos by Douglas Crockford immensely valuable – although not easy to consume. JavaScripts the Good Parts and http://www.youtube.com/watch?v=v2ifWcnQs6M are some of my preferable ways to enter the JavaScript world.

  • George Panagakis

    Many Thanks John!! I watched the intermediate course and it was really enlightening and helpful.
    I am eagerly waiting for the SPA JumpStart.

  • http://jitendra.me Jitendra Singh

    Looking forward for it :-)

  • buddyP

    My goal is to have PhoneGapBuild create apps for several platforms. I love “Hot Towel” and have completed an app prototype, however, I am concerned that PhoneGap is not going to handle all the .cs and .cshtml files. Any ideas?

  • Luis

    Great news!

    I have been waiting for it.

    John, please take into account that some of us don’t have access to the code files, thus we need to see the code on the videos in order to replicate it.

    I would like to have you do a course geared to beginners with a step-by-step feel to it. You would actually build the product incrementally instead of jumping around code already written and explaining it. That tends to be overwhelming for us noobs.

    I really enjoy your courses. Please keep them comming!

    Luis

    • John

      Luis – Yep, the intermediate shows a lot of code, but its not intended for you to write it with me. The beginner course (SPA JumpStart) was written so you could write every line of code with me (other than a few obvious copy and past examples). Pluralsight is also allowing me to publish some source code for free. Of course, you can always upgrade to the Pluralsight Plus and get everything. Keep in mind that that is their business model. It can;t all be free :)

  • Garrett

    Hello Mr. Papa.

    I’m looking forward to your new SPA course. I watched your other one many times, and it helped me a lot to develop a new SPA app on my own. However, requirements have now changed (what’s new, right?), and I need some additional guidance on how to proceed.

    For our SPA app, instead of having a set of defined views and viewmodels that live on the server as .html (or .cshtml) and .js files, we need to build a system where the views and viewmodels are created in “real-time.”

    This is an intranet app and we want end-users to be able to define what they see and use in the app as they are using the app. For example, end-user A selects that they want view1, view2, and view3, while end-user B chooses to see view1 and view2, and so forth. They can name these views whatever they want (e.g., dashboard 1, plant view 2, etc.), and then they can select one or more “widgets” to be on each view. A “widget” would be a contain set of JavaScript/HTML/CSS code, similar to user controls in the web forms world. So, each time end-user A opens the app, they’ll see their 3 views as tabs across the top (named whatever they named them when the views were configured) and they’ll be able to navigate to the view and see the widgets they chose on each view.

    In studying your SPA courses and developing our own SPA, the views and viewmodels are developed as actual physical files that run on the production web server and provide the functionality intended to all users. But, our ‘new’ SPA needs to be more dynamic in terms of what views/pages are available.

    So, is a SPA app a legitimate architectural selection for an app like what we need? If so, how would you go about combining the SPA concepts that you’re teaching while also providing the additional requirements that we need?

    Or, is this not possible with a SPA? If so, what’s a better path for us?

    Or, do we need to create some sort of html and JavaScript generator that will output files after the user has selected the configured options?

    Or?????

    Thanks for your help!

    • John

      Garrett – You could make the views show up in a dashboard that is specific to each user. That would be pretty straightforward with something like Durandal and its view/viewmodel composition. If you want to the user to create a new view on the fly, that would take more work in any tech. Certainly it can be done, but it’s not something I can dive into in a comment due to space :)

  • Garrett

    Thanks John. I can appreciate that my questions are probably too involved for the comment space on your blog posts, but I’m just having trouble seeing the forest through the trees (so to speak) on how to architect/implement creating the views/viewmodels for a SPA on-the-fly.

  • Eric

    I was playing with HotTowel today , in a master – detail use-case scenario, like CodeCamper.
    I was wondering if there is already a best practice on adding a route for the “detail” view which is driven by a parameter (speakerId)
    I wouldn’t want to start taking apart router.mapNav …
    I hope this is covered in your upcoming lessons as well

  • LastTribunal

    John,
    Will you be touching upon implementation of odata web api in your SPA demo?

  • Matteo

    Hi John, I attended your 3 courses at Pluralsight (Knockout, SPA advanced and SPA Jumpstart) and they are very well done: thank you!

    Now I am re-watching the JumpStart one while actually writing the code of a test SPA.
    On module 7 (Routing to details) I didn’t understand a thing: why do we have to do the jquery delegate of the click event instead of data-binding a simple link to the correct route (sessiondetail/) in the list?

    Thank you,
    Matteo

    • John

      Matteo – We display a list of several items, and each item can be selected and then handle a click event. If we bind an event to each element using the click handler, that becomes 100+ event handlers. It is more efficient to have 1 event handler bound to the parent element that uses a delegated event to listen for all items in it.

      Thanks for the feedback!

      • Matteo

        Hi John, thank you for your kind answer. I understand the event delegation instead of having each knockout click binding: your explataion here was very clear in the course.
        What I don’t understand is why we cannot just have simple hyperlinks with the URL set to the correct route (es. sessiondetail/4), created by attr: binding, without any event binding.

        If we link to the correct route with a href, does the application behave differently than calling router.navigateTo(url)? Calling the routes directly in the address bar I see the splash screen and it seems to reload, but I don’t understand why: I thought that Sammy would get the route and do the same thing, so that binding a click event would be the same as bind the href attribute of a hyperlink. What am I missing?

        To be sure, is this the right place for this kind of questions?

        Thank you,
        Matteo

  • Thibor

    Hi John,
    Your SPA courses are very exiting and they were a joy to follow.
    In my exitement trying to adopt as many techniques as I’ve learned from the courses I’m struggling with the challenge of how best to handle ‘legacy’ / non-SQL databases that don’t allow a simple ODBC connection.
    Would you advise trying to solve this with something like SSIS, or would it be better to expose this data with WEB API, or would a custom dbcontext be the best place to handle the data?
    I love breeze and would really like the application side to be able to make use of the best techniques, but I’m not sure if migrating the problem to SQL would be the best alternative.
    I’d appreciate to hear your best practice view on this. Breeze can’t handle the CUD operations using WEB API, yet, but maybe that would be the best solution…

  • Ben

    Hi John, thanks for the course, it’s really amazing!

    I enjoyed the intermediate one too but this one is answering so many questions to me. I’ve got another one: when talking about security/sensible data, is it a problem for SPA? For example a bank/payment page in a shop store, without the possibility to cache sensible data (credit card details, etc) in the browser, will this scenario work fine with a SPA? Is it the SPA suitable for any scenario in our lives as web developers?

    Thanks again for the courses and for the time it takes

    • John

      Ben – SPA is as secure as you make it. Keep sensitive info on the server and handled there, just as in any distributed app. Sure you can build a business app with SPA, just take measures to authenticate, authorize and only bring data to the client that needs to be brought.

  • Ben

    Hi John, thanks for your quick answer.

    What about the way the browser will behave in a security scenario (cookies/not cache-able data, etc)? Because SPA’s app have a particular way to work and I don’t know if that could have an impact in security or if because of the use of security (like SSL) that would “cut” some of the nice SPA’s features. Would be necessary a change in the way to manage/get data with Breeze or in the way to use navigation?

    Thank you very much again.

    • John

      Ben – Not sure exactly what you are asking, but SPA works fine with SSL, HTTPS, and auth from ASP.NET.

  • Ariel M

    Hi everyone,

    I have a question regarding CodeCamper app. In the “config.js”
    file, the “currentUserId” value is hardcoded to “3”. I want to set this value with
    the SQL employee table unique “id” after it has authenticated using a Login
    page.

    The login page is already working, I just need to set the “currentUserId” value to make it all work, anyone has an elegant solution?

    Thanks

  • Ariel M

    Question regarding CodeCamper app by John Papa.

    In the “config.js” file, the “currentUserId” value is hardcoded to “3”. I want to set this value with the SQL employee table unique id after it has authenticated using a Login page.

    The login page is already working, I just need to set the
    “currentUserId” value to make it all work, anyone has an elegant
    solution?

    Thanks

  • Aaron Losch

    Single Page Apps JumpStart is confusing to me, templates aren’t visible in MS Visual Studio Express 2013 for Web, after I download them and the out of box SPA won’t generate when I hit Ctrl + F5 and web pages/software looks and feels different than the modules. Is there any introduction material before I attempt to complete this course?

%d bloggers like this: