<commit_before>doctype html
html(lang="en")
    head
        title JS Modules
        meta(charset="utf-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        link(rel="stylesheet", href="styles/reveal.css")
        link(rel="stylesheet", href="styles/theme/beige.css")
    body
        .reveal
            .slides
                section
                    h1 Title
                section
                    section Slide 1
                    section Slide 2
        script(src="scripts/highlight.js")
        script(src="scripts/reveal.js")
        script(src="scripts/main.js")<commit_msg>Added a few slides<commit_after>doctype html
html(lang="en")
    head
        title JS Modules
        meta(charset="utf-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        link(rel="stylesheet", href="styles/reveal.css")
        link(rel="stylesheet", href="styles/theme/beige.css")
        link(rel="stylesheet", href="lib/css/zenburn.css")
    body
        .reveal
            .slides
                section
                    h1 Modules in JavaScript
                    h4 from dark ages to ES2015
                    img(src="images/modules_illustration.jpg")
                section
                    h2 Agenda
                    ul
                        li Global scope
                        li Single var
                        li Self-executing anonymous function
                        li Revealing module pattern
                        li CommonJS in NodeJS
                        li Browserify
                        li AMD (RequireJS)
                        li ES2015 (ES6, ES.Next, Harmony) modules
                        li Current state and support
                        li Compatibility with ASP.NET MVC and ASP.NET Core 1.0
                        li Questions?
                        li Demo overview
                section
                    section
                        h2 Global scope
                        p JavaScript has two scopes: global and local. A variable that is declared outside a function definition is a global variable, and its value is accessible and modifiable throughout your program. A variable that is declared inside a function definition is local.
                    section
                        pre
                            code(data-trim="data-trim") var a = 1; //global variable, becomes a property of window object also
                                |#{''}
                                |function () {
                                |  var b = 2; // local variable
                                |  c = 3; //implicit global variable, will cause Error in strict mode
                                |}
                                |#{''}
                                |console.log(a); //1
                                |console.log(window.a); //1
                                |console.log(b); //undefined
                                |console.log(window.b); //undefined
                                |console.log(c); //3
                                |console.log(window.c); //3
                    section
                        p There are many variables initially defined in global scope
                        img(src="images/Window_object.png")
                        p You can accidently overwrite something
                        p Global variable will not be eligible for collection until the global namespace loses scope.
                    section
                        p Always beware that someone will declare the variable with the same name as yours and the app will work incorrectly
                        img(src="images/unexpected.gif")
                section
                    h2 How can we deal with it?
                    img(src="images/sceptic_woman.jpg")
                section
                    section
                        h2 Single VAR
                        p
                            ul
                                li Declare only one variable per module
                                li Use the same filename as module name
                        h2 Self-executing anonymous function
                        p Create local scope and execute it immediately
                    section
                        pre
                            code(data-trim="data-trim") //module1.js
                                |(function () {
                                |  //local variables, not visible outside of the function
                                |  var a = 1;
                                |  var b = 2;
                                |#{''}
                                |  //explicilty declaring single variable on the global scope
                                |  window.module1 = {
                                |    doMath: function(c) {
                                |      return a + b + c;
                                |    }
                                |  }
                                |//calling the function after declaration
                                |})();



        script(src="lib/js/head.min.js")
        script(src="scripts/reveal.js")
        script(src="scripts/main.js")
{'fraction_non_alphanumeric': 0.06780310285385942, 'fraction_numerical': 0.006512162420992147, 'mean_word_length': 0.9369436201780416, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 14, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6043378', 'n_tokens_mistral': 1179, 'n_tokens_neox': 1066, 'n_words': 347}