ModernJS

State of The DOM

JavaScript - The Bad Parts

• The Good Parts - javascript.crockford.com
• Cross Browser Nightmares
• A New Scary Language
  • Objects without the OOP
  • Functional? ... Not Quite
  • Scope to the rescue! Maybe...
• JavaScript is Basically Netscape's Orphan.

JavaScript - The Reality

• Where is the compute power today (client/server)?
• Customers are starting to expect Native-like experiences
• The "Dumb Client" Has Gotten Smart.

Honorable Mention

Developer Tools

The Goods

Templating

Templating - In The Wild

Data Binding in the DOM

<div class="profile-card">
    <img src="{{imageURL}}">
    <h1>{{fullName}}</h1>
    <h2>{{tagline}}</h2>
</div>

Refactoring - Before

function showSystemAccessInfo(systemName, ip, password) {
    $("#systemNameBox").text(systemName);
    $("#systemIPBox").val(ip);
    $("#systemPasswordBox").val(password);
    $("#systemAccessInfoDialog").dialog({
        buttons: {
            Close: function() {
                $( this ).dialog( "close" );
                $("#systemNameBox").text("");
                $("#systemIPBox").val("");
                $("#systemPasswordBox").val("");
                $("#copyInstructions").hide();
            }
        }
    });
};

Refactoring - After

function showSystemAccessInfo(system) {
    var systemAccessInfoDialog = $('#systemAccessInfoDialog').compile().bind(system);
    $(systemAccessInfoDialog).dialog({
        buttons: {
            Close: function() {
                $(this).dialog("close");
                $("#copyInstructions").hide();
            }
        }
    });
};

MVC, MVVM, MVWTF

MV* - In The Wild

• Hugely Overloaded Term(s)
• TodoMVC
• All About The Data
• If Not The DOM, Then Where?
• Web Components

<!-- Angular Directive - Chart.js -->
<div ng-app="chartjs-directive">
  <chart value="myChart"></chart>
</div>
<script>
function myContoller(){
  var data = {
    labels : [],
    datasets : []
  };
  $scope.myChart.data = data;
}
</script>

Component?

Goldilocks MV*

• Too Little - Twitter
• Just Right - GitHub
• Too Much - Facebook

Check Out RiotJS - TodoMVC!

Refactoring

Lots of Opportunity

• DRY up code, refactor to MV* components
• Ideally: Create Hierarchy of Extensible Components

Some Suggestions

• Keep PHP out of your JavaScript
• Keep JavaScript in separate, cacheable files
• JavaScript has only as much structure as you give it
• Give it some structure!
• Events are your friend
• Make The Partial === Component Definition
• Dependencies & Load Order

PHP JavaScript Service

• Components Define Dependencies
• Priority / Ordering
• Handle Dependency Collisions (load only once)
• Concatenate Files
• Minify

Build Tools

In The Wild

• Grunt (*)
• Gulp
• Make?

Opportunities

• Don't Write JavaScript (TypeScript, CoffeeScript, etc)
• Split Up Files, Improve Organization
• Keep JavaScript Out of DOM
• Concatenate & Minify
• Automated Testing

Testing & Testability

(The Real Reason To Listen To Me)

Testability

• Templating codifies the DOM enough to be testable
• MV* Adds Enough Structure to Spaghetti to be testable
• Build tools like Grunt have awesome tools for testing

Testing

• Jasmine
• Mocha
• QUnit
• PhantomJS
• Huxley
• SauceLabs