martypdx

AoT Template Extraction

Rather than creating DOM nodes in JavaScript, an AoT system can extract the html, deliver as html, and then only need reference the relevant DOM nodes in JavaScript. This has a number of performance benefits:

1. It takes advantage of fast parsing of html by the browser and avoids the additional JavaScript bundle size and parsing tax.
2. Only elements involved in binding need to be managed or even referenced
3. Faster mechanisms like cloneNode can be used to produce cheaper copies
4. Like html templates can be consolidated

Based on the current Svelte 3.0 output, it seems well poised to take advantage of this.

martypdx

R&D 01: JS Templates, Array .forEach Method, Named Exports and Imports

JS Templates

• MDN (only read up to (but not including) "Nesting Templates")
• Google Developer (don't need to read "Tagged Templates")
• CSS Tricks (don't need to read "Tagged Templates" or following section)

Array Methods

martypdx

TAM

• Current ~500K open developer jobs
• By 2020 likely to be 1.5M
• CS Grads ~50k/yr
• Code Schools ~20k/yr

Our Traction

martypdx

const assert = require('assert');
const mongoose = require('mongoose');

const RequiredString = { type: String, required: true };

const schema = new mongoose.Schema({
    name: RequiredString,
    type: RequiredString,
    colors: [{
        name: RequiredString,

martypdx

// Assumes:
// 1. application/json response content type
// 2. registered error handler capable of handling rejections
module.exports = function respond(handler) {
    return async (req, res, next) => {
        try {
            const result = await handler(req);
            res.json(result);
        }
        catch(err) {

martypdx

# rename all .js to .mjs
for f in **/*.js; do mv -- "$f" "${f%.js}.mjs"; done

# add .mjs to all file-based import statements*
find . -type f -name "*.mjs" -exec sed -i '' -E "s/(import.+'\.[a-zA-Z0-9\.\/-]+)';/\1\.mjs';/g" {} \;

# *NOTES: 
# 1. This will double up existing .mjs extension in imports.
# Couldn't get phrase negation working in this sed substitution regex :(
#

martypdx

control flow

• if, else, while, for, do

functions

closures

var a = 'foo';
function b(){

martypdx

control flow

• if, else, while, for, do

functions

closures

```js
var a = 'foo';
function b(){

return a;

martypdx

control flow

• if, else, while, for, do

functions

closures

```js
var a = 'foo';
function b(){

return a;

martypdx

control flow

• if, else, while, for, do

functions

closures

```js
var a = 'foo';
function b(){

return a;