Why All Those JavaScript Libraries? | John Papa

John Papa

Evangelist on the loose

Why All Those JavaScript Libraries?

...

Flustered by so much JavaScript? Concerned with all the seemingly new patterns to learn? Confused about how to organize it? You are not alone.

Many JavaScript Libraries

You may look and think, wow, there are a lot of JavaScript libraries in this project. 3-24-2013 11-49-54 AM The “Many” is subjective based upon your perspective. Is 3 many? Is it 10, 20, 30 ? I think it depends on who you ask. Let me put it another way: if you work on a ASP.NET MVC project take a look at all of the dll’s in your references folder. How many is too many there? I bet they don’t bother most folks. Rarely do I hear complaints about that. Is it because Microsoft put them there? Or is it because they are out of sight out of mind? Or possibly we are just used to them being there.

Now let’s take a look at the 3rd party JavaScript libraries I included in my course and in the Hot Towel SPA template.
3-24-2013 11-56-52 AM

My point is that the number of JavaScript libraries I use is dependent on the value they offer. If a library offers more value to me than me writing it, then I am fine using it.

Note that I rolled up the min versions using a feature of VS 2012. Some people remove these files, others leave them alone. Choose your own adventure :)

<Content Include="Scriptsjquery-1.9.1.js" />
<Content Include="Scriptsjquery-1.9.1.min.js">
  <DependentUpon>jquery-1.9.1.js</DependentUpon>
</Content>
<Content Include="Scriptsjquery-1.9.1.min.map">
  <DependentUpon>jquery-1.9.1.js</DependentUpon>
</Content>
<None Include="Scriptsjquery-1.9.1.intellisense.js">
  <DependentUpon>jquery-1.9.1.js</DependentUpon>
</None>

Tracking Dependencies

I had a comment recently on a discussion board for my latest SPA JumpStart course at Pluralsight. “TheWayItIs” explains

My concern comes with the many code libraries and hierarchical dependencies of your patterns upon these.This in itself seems to become spaghetti of external dependencies on your patterns.

I already know these things, and that is the heart of the problem. I’ve gone through this jungle and come out the other end. Seeing the relationships and dependencies between these libraries is clear to me now. However, that is because I now know what to look for and how they all work together. Further, the patterns I employ help clarify this for new libraries and dependencies I may add or remove in the future. Now that I have this knowledge, it is more difficult to imagine what it is like to be without the knowledge. It is like this for anyone who tries to explain something that they know to someone who doesn’t know. I have to break it back down to the time when I lacked it. This is my job: to walk through these issues and show you what to look for and how to gain this clarity.

The dependencies are handled by 2 main players: the require.js and the module pattern. The module pattern separates code into more files, where each file has one specific role. then require.js helps load those dependencies between modules in their proper order. This is over simplification, but really, that’s the key to this point: it doesn’t have to be complex.

Keep your code separated and let require.js handle dependencies.

I’ve been a .NET coder since the beginning and I use these same concepts with .NET. It all falls down to Single Responsibility Principle (SRP). Keep your code separated (and do not repeat yourself) and you gain code re-use, reduce bugs, make it easier to maintain, and can scale easier.

Production Capable?

The same person on the discussion thread at my SPA course also asks

… are you proposing your sessions as production capable patterns relying on these many libs or should we view these patterns as useful for an expiring app such as a code camp with speakers?

My answer is yes. Yes these libraries and patterns are production capable right now, today, this moment (notice the pun on moment.js). Of course patterns and libraries evolve.

Why Introduce New Libraries?

Case in point is that I knew Durandal.js and Breeze.js were being developed when I wrote my intermediate SPA course. They were not ready for apps at that time (this was last summer), so I wrote replacements by hand. This accomplished a few things. First, when you go through my intermediate course you understand the complexities of solving these problems that these 2 libraries solve for you. Why? Because I walked through how to do it all manually and it was much more work. Second, there is value in seeing how this all works so you do not have magical black boxes solving your issues. Not that you want to recreate the wheel, but its important to know how a wheel rolls. Finally, after going through that experience, you now understand and appreciate the value of Durandal and Breeze much more than if you had not seen how to do it all by hand.

Clarity

Clarity won’t come in a heartbeat, but rest assured that it will come. Just like 100’s of files in .NET appear manageable to you today, the amount of JavaScript won’t appear so daunting. You’ll see that many of the important patterns you know so well in .NET are still there in JavaScript. Organizing your code in .NET is slightly personal preference … it’s the same with JavaScript/HTML. You’ll find the arrangement that works for you and find your chi.

These were awesome questions and they deserved some time in print. I hope they help you!

tags: javascript SPA
  • http://templecoding.com Thiago Temple

    Couldn’t agree more. I specially think that using well tested 3rd party libraries, would help us write less code, make less mistakes and, of course, support less code.

    This is a great advantage. Also, I suppose a lot of confusion comes from people not knowing the module pattern or even other JavaScript patterns for organizing JS code. Once, passed that stage, I think people would realize the full benefits of using requirejs and the module pattern.

  • http://www.opwernby.com Dan Sutton

    Hmmm. I have no problem with using a bunch of JavaScript libraries (in theory – i.e. has your page actually loaded yet?) but yes – I do prefer to write them myself… I don’t trust said libraries not to want to load a whole bunch of stuff I’m never going to use along with whatever 10% of functionality I’m actually using: at least if I do it myself, I know what’s happening. And the old machine code programmer in me yearns constantly for efficiency and the resurrection of Dijkstra. Furthermore just on a visceral level, I kind of detest Ajax (clever though it might be) — not so much for what it is as for what it represents: a whole bunch of people running around using it even where it’s inappropriate – e.g. if they only knew what they were doing, two lines of JavaScript would’ve solved the problem – and calling themselves programmers… mind you, the same could be said of Windows (as opposed to writing your own windowed environment in machine code) and so on… Reminds me of Spock, to Kirk in whatever Star Trek movie it was: “Do you suppose that we are now so old as to be absolutely useless?” Perhaps I’m just this guy… it’s hard to tell these days: http://www.cs.utah.edu/~elb/folklore/mel.html

  • Dave

    John,

    On the topic of .NET references vs. JavaScript references, it’s worth noting that your .NET app doesn’t SHIP most of those libraries because they are already on the target system (in the .NET framework). CDNs can help in JavaScript, but you do have to at least think about it a little bit more so that you’re not pushing a huge amount of code over the wire.

    Overall though I agree with your points.

    • John

      Dave – Yes, valid point. Distribution is a different story. We can also bundle and minify our JS.

  • christodoulos maragkos

    For now from what I see all those libraries are great and very helpful but! What happen in authentication? We expose all the model in a single page with a client side navigation, how to ensure the read insert update delete per role or user per entity or boundaries? This pattern is grade is a modern and an efficient way to programming (more when you are own the vps and every resource matters) but I think, the next step is to find ways to secure this, in more complex scenarios than the code camper.

    • John

      Christodoulos – Security works fine using ASP.NET auth.

      • christodoulos maragkos

        Yes John the ASP.NET Auth secure the page but the problem is the menu for different users with different rights for example orders administrator can manage orders but some other users cannot, but they can manage some other entities, for the menu we can load it as json with business logic from an controller, but the breeze controller and EF custom context provider expose all the model from the context, so the problem is in the model boundaries I read in Ideablade that you can make more than one EntityManagers and make custom EF custom context providers, so we can make boundaries and use the breeze context provider somehow as a repository but is not very clear to me yet I have to dig some more…
        And an alternative way is to make more than SPA page of course.

        • John

          Christodoulos – The server authenticates the user, so you can ask the server to tell you which menu options the user should have and only show and load those. No business logic should happen on the client, instead it should happen on the server. Breeze doesnt expose anything more than what you tell it to expose. I would not expose the full menu data if this was a concern. Instead expose just what you need. This is not SPA or Breeze, its securing Web API or any web services.

          • christodoulos maragkos

            Yes we say the same thing :) when I said “for the menu we can load it as json with business logic from an controller” I mean depends the rights from server side send properly roots that fits for the role or user rights, to the durandal router and apply the proper menu, and maybe with the same way dynamic say to entitymanager witch breeze controller with should be used for the specific role so we can be sure what model we expose, I don’t know maybe is to much to thinking for the model that we expose if it is authenticated user but for me I like to have things under control as most that I can “NEVER TRUST THE USER” :) Any way thank you very much for your time.

  • Richard Davison

    Completely agree.

    • Joseph Ortiz

      Great point, I will make sure to abstract the business logic all on the server side. I am currently working on a SPA and was worried about authentication and security! Thanks for clearing it up!

  • http://zoldello.wordpress.com Phil

    I think it is unfortunate that there are so many JavaScript libraries. It is one thing to give users choices. It is another to build a full library and only differ with other open-source libraries by one or two features. Have people forgotten about forking-code; or is that just reserved for jokes?

  • Pingback: Darker Nemesis’ Weekly Reading (#14) | Darker Nemesis

  • Pingback: John Papa interview on SPA (Single Page Applications) - SSW TV | SSW TV

  • Jim

    Hi John,

    I’m about to start in on your latest Pluralsight (‘Hot Towel’) series, having loved your CodeCamper one a few months ago.

    It was wonderfully done and explained. The biggest problem for me however was the require.js part. I *mostly* got it, but not completely. Nothing you did, it’s the library itself and how it works that has me scratching my head.

    For instance, when you’re passing in dependencies ([‘ko’], [‘utils’],[‘config’] …) how do you new() them up in your code if you need to?

    For things like Knockout you don’t really have to, they’re a collection of static (is that the right word in javascript?) methods. But if I’m passing in a dependency to my own class [‘myClass’] and I need to create a couple of instances of it in the code, how does that work?

    In the CodeCamper SPA you have a few classes that appear to allow for this– the SessionFilter for instance– and you seem to do something with their prototypes, involving ‘var self = this’. Not sure I followed how all that comes together.

    Could you explain a bit more how to new up objects when require.js is your object manager? I’ve gone over the documentation at require’s website and didn’t really see anything that dicusses this. Other documentation or blogs on the subject are welcomed too.

    Thanks again for all the wonderful courses.

    • John

      Jim – You can pass in a module that is a constructor. Let’s say you have a constructor function for Person. Pass that in, just like you do for any other dependencies. Then in your module say var p = new Person().

  • http://www.mightybs.com/ Brian Swiger

    What’s interesting, John, is I use this same analogy when explaining to folks (students, audiences, colleagues) of WHY we use tons of JavaScript libraries. I pretty much say, “we don’t have the .NET framework in JavaScript”. I view bringing in JavaScript libraries as a way to supplement what is missing and help me with plumbing. Back in the good ol’ C days, we didn’t have these fancy libraries and had header files everywhere. =P

  • Jose Luis

    Hi John,

    i´m not going to comment your course … instead please, please you should give some way (URL. Guide, troubleshooting methods etc) to tell the “normal” people how to have running this great intellisense VS system… really i’ve been trying but no way and is incredibly how the system popups javascript methods.

    Thanks for all

    as i told you, please remember SignalR and oAuth (try to introduce in your courses)

    see you

    • John

      Jose – Intellisense within AMD modules is not consistent with VS 2012, unless you use Resharper v7 (which is what I use). I hope this will change in the future.

  • Derek C

    I realize this post is a tad old, however I stumbled upon it because I have been thinking a lot about dependencies. Wherever the tier or layer, anytime you use a dependency, you now “own” that code. If there is a bug in the dependency, that’s your problem. Your boss, product owner, or customers do not care that you didn’t write it. If the dependency has a lot of magic, your entire team now needs to understand the magic.

    Another common issue is the actual use of the dependency. How often have you seen the dependency on a framework/lib and only be using 10% of it?

    Frameworks and libs aren’t bad. What’s bad is using them without this understanding.

%d bloggers like this: