Your perfectJavaScriptframework

View Github Repository Open presentation in a new window

jede

See all presentation from jede

Your perfectJavaScriptframework

0 0

your-perfect-js-framework

Presentation for IDG Code Night

On Github jede / your-perfect-js-framework

Your perfectJavaScriptframework

Johannes Edelstam / @jede

Hej! Stort tack för att ni bjöd in mig. Så kul att vara här och prata!
Tydligt: Angular.js - självklart val

Tack!

Användbara länkar:

http://trends.google.com

Ok, skämt, alla vet - Github stjärnor som gäller

Agenda + Mål

  • Varför ramverk?
  • Ramverk därute
  • Måste man?

Mål: Blixtsnabb bild - var är JS-världen på väg

Nordic.js

  • 15 min - sen frågor
  • Länk till slidesen i slutet
  • Fota mig gärna och lägg ut på internet så jag måste tänka på min hållning

Tack!

Användbara länkar:

http://trends.google.com

https://github.com/trending/javascript

http://www.timqian.com/star-history/

Struktur

Konventioner

Säkerhet

Återanvändbarhet

Egen struktur

Egna konventioner

Bibliotek

Templates

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'}); // => "hello: moe"

Components

@Component({
  selector: 'my-hero-detail',
})
export class HeroDetailComponent {
}

<my-hero-detail></my-hero-detail>

Two-way bindings

<p>Hello {{name}}</p>
<input value={{name}}>

Routing

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Template.task.events({
  'click .toggle-checked'() {
    Tasks.update(this._id, {
      $set: { checked: ! this.checked },
    });
  }
});

Web Components

HTML Templates

<template id="product">
  <div>
    <span class="name"></span>
  </div>
</template>

Shadow DOM

<p id="hostElement"></p>

var shadow = document.querySelector('#hostElement').createShadowRoot();
shadow.innerHTML = '<p>Here is some new text</p>';

Custom Elements

class SaveBtn extends HTMLElement {

   constructor() {
      super();
   }

 // Define the required of the 4 available callbacks
 // Define getters and setters
}

document.registerElement("save-button", SaveBtn);

<save-button></save-button>

HTML Imports

<head>
  <link rel="import" href="bootstrap.html">
</head>

Webpack

// content.js
module.exports = "Hello from content.js.";

// index.js
document.write(require("./content.js")); // Prints: Hello from content.js

JQuery

http://youmightnotneedjquery.com/

Uppgradering

Frågor?

Summering

  • Många starka ramverk med mycket traction - satsa på rätt häst
  • Du kanske inte behöver ett ramverk

Målbekräftelse

  • Känns det som att ni fått en överblick?

edelst.am/idg

Your perfectJavaScriptframework Johannes Edelstam / @jede Hej! Stort tack för att ni bjöd in mig. Så kul att vara här och prata!