Teaching JavaScript and a Quick History of the Web

Note: Originally posted on August 26, 2016 at Geekswithblogs.net .

I had the privilege of spending time with four interns at Omnitech this summer. See our @Omnitech Twitter feed or our site to learn more about Omnitech. Sometimes it’s difficult to know how to have interns at a company, but we see it as an investment in them, the community and ourselves. We’ve had several interns in the past become valuable employees. It’s fun to see how much they grow personally and technically in just a few months or years.

I didn’t have the opportunity to work with them directly, but I was talking to a few of them as they were getting started. They were working on a web page for a real project that needed to filter data and show it in a grid. With my background and experience in web development over the last 9 years, I said something like “did you know that there is more to web development than jQuery? Grab me next week (I’m only in the home office 2 days a weeks) and I’ll show you a few things.” I was almost surprised when I got an email a day later asking if I could join them for their weekly lunch. Good for them for taking initiative!

I put together something short to talk about and get us on the same starting point and then we dove into some of the code they had written early that week.

I first ran through a quick history tour of the web as I “bingoogled” it and saw it (I took about 5 minutes to put this together :-)).

Update: In December 2017, Richard Campbell on DotNetRocks for their 1500 show gave a history of .Net with a promised book to come. It’s worth listening to.

Update: Brendan Eich (JavaScript and Brave) gave a talk posted on Aug 6, 2018 A Brief History of JavaScript

1. HTML invested in 1989 at CERN
   1. https://www.w3.org/People/Raggett/book4/ch02.html
   2. Meant to share documents
   3. “to organize and pool together information. But far from simply making available a large number of research documents as files that could be downloaded to individual computers, he suggested that you could actually link the text in the files themselves.”
2. 1993 Lynx
3. 1994 Netscape
4. 1994 Cascading Style Sheets (CSS) introduced
5. September 1995 Netscape Navigator 2.0 release with JavaScript - JS history
6. 1995 IE
7. 2008 Chrome
8. With different browser IE 6, Chrome, Firefox, etc jQuery 1.0 was released on August 26, 2006
9. 2007 I started at Omnitech :-)
10. Sept 28, 2008 Microsoft bundles jQuery with Visual Studio > File new project ( http://weblogs.asp.net/scottgu/jquery-and-microsoft )
11. Asp.Net WebForms hide most of the html and JavaScript behind the scenes
12. 2008ish ASP.NET AJAX Control Toolkit lets us do crazy stuff like Ajax Panels without thinking about it
13. 2006 - present There are many jQuery controls that are very good coming out 1.Calendar, carousel, etc..
14. 2008 - Silverlight 2.0 released 1. http://weblogs.asp.net/scottgu/silverlight-2-released 1.I started digging into WPF, Silverlight XAML and using it in real projects. 1.MVVM became a more known and used pattern with data binding 1. https://msdn.microsoft.com/en-us/magazine/dd419663.aspx?tduid=(ee1241a70ed9dc24a08391ed5de5b4c6)(256380)(2459594)(TnL5HPStwNw-kvdXLu4SCs4nRDAhCbflaA)() 1.March 2009 - ASP.Net MVC is released 1. https://en.wikipedia.org/wiki/ASP.NET_MVC 1.Now we need to learn more about HTML 1.July 2010 KnockoutJs released 1. https://github.com/knockout/knockout/releases?after=v1.1.1 1.I realized that MVVM can be used with this library on the web! Even though Silverlight is “dead” as declared by iPhones, iPads, and years later browsers not supporting plugins, learning about Silverlight is not wasted. Besides, XAML lives in Universal Windows Apps and Xamarin. 1.June 2012 AngularJs 1.0 released 1. https://developers.googleblog.com/2012/06/better-web-templating-with-angularjs-10.html
15. 2014 Html5 1. https://en.wikipedia.org/wiki/HTML5
16. ES2015 features improving JavaScript 1. https://babeljs.io/docs/learn-es2015/ 1.Babeljs lets us write ES2015 (used to be named ES6) and trans-pile it down to EcmaScript 5
17. 2015 MS Edge and the pending death of IE9,10,11 (evergreen auto-updating Browsers!)
18. 2016 Aurelia and Angular 2.0

Understanding Server vs Client

Doing more in JavaScript means doing more work on the client. It also means sending more bytes and changes the paradigm from the Asp.Net MVC/Web forms with postbacks. We need to use the right tool for the job and understand the tradeoffs.

Server: MVC, @Razor, Web Apis (serves up the files (html, css, js) and data (Json/xml)

Client: Browser is like a mini-OS. Runs the javascript and executes it.

I see a logical progression from the “old” way of augmenting server rendered pages to the “modern” way of doing more work on the client with JavaScript.

1. JavaScript in html 1.Many people start with putting their JavaScript code in a script page inside of the html page. This approach doesn’t allow the JavaScript to be minimized and combined to improve page loads.
2. Js/Jquery code into a JavaScript file with Object Orientated design 1.We spent the 2nd half on a current page moving from one big function of jQuery selectors and ajax calls to classes and methods. See below for a code sample. 1.Data binding introduction and moving towards it - next week 1.Knockout
3. Minify and combine 1.Gulp/Grunt
4. Import modules
5. Single Page Apps (SPA) 1.Durandal 1.Angular 1.0 1.Ember, etc 1.Watch out, things will not work as well with a lower bandwidth connection, or in the small chance that JavaScript is turned off in the browser. Ideas around progressive enhancement is around making it work like an escalator which still functions as a stairway if there is no power.
6. Unit testing
   1. Jasmine, Karma etc
7. Large apps 1. http://portal.azure.com 1. https://vimeo.com/97519516 (Steve Sanderson - Architecting large Single Page Applications with Knockout.js)
8. Other cool things in web tech: 1. http://www.flightarcade.com/learn/webgl 1. http://arstechnica.com/business/2010/04/html5-and-webgl-bring-quake-to-the-browser/ 2. http://www.ageofascents.com 3. http://www.html5rocks.com/en/ 4. Canvas: http://www.html5rocks.com/en/search?q=canvas 5. Cordova/Phone Gap Ionic 1. Package phone apps made from web technologies 2. http://ccoenraets.github.io/cordova-tutorial/ 6. Electron - http://electron.atom.io/ (desktop apps) 1. https://code.visualstudio.com/ 2. Slack app 7. Node as a server (running JavaScript)

Resources

• www.objectplayground.com
• http://www.javascriptoo.com/
• http://youmightnotneedjquery.com/
• http://devdocs.io/
• http://www.html5rocks.com/en/
• https://scotch.io/tutorials
• http://javascriptweekly.com/
• https://johnpapa.net/
• https://mva.microsoft.com
• Many more… (trying not to overwhelm, but it’s too late for that ).

There’s always more to learn: Checkout Simona’s diagram Tweet

We started from something like this snippet of code in a Tracking.js files. I’ve left out some details on the FilterOnChange and other parts. This was getting pretty complex and hard to follow. Notice the usage of $(document).ready and lack of logical methods (I often see this when developers are using jQuery to do more complicated UIs). We can use good coding practices with JavaScript, just like we’ve learned in C# and other languages. They were reading Clean Code by Robert Martin in a book club at the time, so I enjoyed seeing how they started connected the dots to JavaScript over the next few weeks.

$(document).ready(function () {
    $('.mrDrop').change(function () {

        FilterOnChange().done(function(data){
            $('.subDrop')
                .find('option')
                .remove()
                .end();

            $.each(data.SubMarketers, function (key, value) {
                $(".subDrop").append('<option value="' \+ value.Item1 + '">' \+ value.Item1 + " \- " \+ value.Item2 + '</option>');
            });

            $('select.subDrop')\[0\].sumo.reload();
            $('.subDrop').trigger("change");
          });
      });

    $('.subDrop').change(function () {
        FilerOnChange();
    });

    $('.siteDrop').change(function () {
        FilterOnChange();
    });

    $('input\[name="Enabled"\]').change(function () {
        FilterOnChange();
    });

    $('.toggle').click(function () {
        TrackingPageHandler.FilterOnChange().done(function () {
            $('input\[name="Enabled"\]:Checked').trigger("change");
        });
    });
});

After a half hour we were on our way to an object orientated approach with a better separation of concerns.

In the .cshtml file.

<script>
 $(document).ready(function(){
    var tracker = new Tracker();
    tracker.initialize();
    // etc
});
</script>

In our Tracker.js we started moving towards something like this.

// we struggle a little to get the class approach correct. I’ve been in TypeScript ( www.typescriptlang.com ) for too long :-). http://www.objectplayground.com was helpful.

// Constructor
function Tracker() {

}

Tracker.prototype.FilterOnChange = function FilterOnChange() {};

Tracker.prototype.GetData= function GetData() {};
// more methods, etc

Conclusion

There’s a lot of things we can learn about in the web development world. We all agreed to continue meeting weekly, to see how I can help them shorten the learning time. We continued with meetings with introductions to MVVM, data-binding with KnockoutJs , RequireJs, TypeScript, unit testing with Jasmine and in C#, and builds with TFS. It was fun to see the improvements in in how readable the code was, their understanding of topics and growth over the summer. I felt that we gained the most value from our time when we spent time with code they were working with, instead of demo code.

Some of this turned into my series and talk From JavaScript Mess to Cleaner Code .