DailyJS

DailyJS

The JavaScript blog.


Tagtemplates
Featured

templates reactive react

Paperclip.js, bem-react

Posted on .

Paperclip.js

Paperclip (GitHub: mojo-js/paperclip.js, License: MIT, npm: paperclip) by Craig Condon is a template engine that's a bit like React, except it translates HTML templates into JavaScript document fragments rather than using a virtual DOM. The template is then cloned when it's used, and requestAnimationFrame is used to prevent unnecessary DOM operations.

Craig provided some examples so you can see how it compares to other projects:

Paperclip has been used for two years in production at ClassDojo, so it sounds battle tested. It has unit tests that run in browsers and Node, and you can also use the module itself in Node.

bem-react

bem-react (GitHub: dfilatov/bem-react, License: MIT, Bower: bem-react, npm: bem-react) is a module for React that provides features to support the BEM methodology which was developed by Yandex.

BEM is a methodology of web projects development, that allows you to divide an interface into logically independent blocks. At the same time BEM contains specific tools for the typical web developers' tasks automatization. And finally BEM gives us opportunity to create libraries of web-components for fast and efficient web-development.

With this module, you can use "bemjson" in templates instead of jsx or JavaScript, and manipulate CSS classes based on BEM.

I noticed there's a demo app in bem-react/example that highlights the bemjson special fields, component use, and component composition.

Featured

templates jquery plugins

jQuery Roundup: 2.1 Beta, dna.js

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.11 and 2.1 Beta 1

jQuery 1.11 and 2.1 Beta 1 have been released. The biggest news is jQuery now supports AMD, and is built with it. Internal dependencies are also managed with Bower.

By using AMD and Bower the jQuery developers are showing that they're receptive to the needs of modern client-side developers.

dna.js

dna.js (GitHub: dnajs / dna.js, License: GPLv3/MIT, jQuery: dna) by Dem Pilafian is a template library that uses valid HTML rather than a new syntax or inline JavaScript templates. It clones an element as many times as you need, and interpolates values.

A template looks like this:

<div>  
  <h2>Featured Books</h2>
  <div id="book" class="dna-template">
    <div>Title:  <span><del>title</del></span></div>
    <div>Author: <span><del>author</del></span></div>
  </div>
</div>  

And you can clone it with dna.clone('book', { title: 'The DOM', author: 'Jan' }).

Featured

templates testing sponsored-content

Catalyst, Teacup, Makery

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Catalyst

Catalyst

Learning JavaScript? Join Catalyst! Full-time, in-person training and job placement services over 12 weeks in San Francisco. Instructors and speakers from Twitter, OkCupid, Adobe, Meteor, and more.

For more information, visit catalystclass.com.

Teacup

Teacup (GitHub: goodeggs / teacup, License: MIT, npm: teacup) by Good Eggs is a CoffeeScript templating language. It comes with middleware that can be used alongside connect-assets for compiling the templates, and the language kind of reminds me of CoffeeScript crossed with Jade:

{renderable, js, css, html, head, body} = require 'teacup'

module.exports = renderable ->  
  html ->
    head ->
      js 'app'
      css 'app'
    body ->
      # ...

It works in browsers, has Mocha tests, and also has a gem for Rails: Teacup::Rails. The author wrote a blog post about it here: Teacup: CoffeeScript Templates for Developer Happiness.

Makery

Makery (License: MIT, npm: makery) by Leonardo Garcia Crespo is a module for making objects to aid with testing -- the author says it works well for testing Backbone models. The API looks like this:

Makery.blueprint(MyConstructor, function() {  
  return {
    id: this.unique(),
    aProperty: 'Some value',
    anotherProperty: 'Another value'
  };
});

var obj = MyConstructor.make();  

Jasmine tests have been included, and it can be used in browsers as long as Underscore is present.

Featured

libraries templates browser

Continuum, Analytics.js, MaskJS

Posted on .

Continuum

Continuum (GitHub: Benvie / continuum, License: MIT, npm: continuum) by Brandon Benvie is an ES6 virtual machine written in ES3. By using Esprima to parse a given source file, it generates bytecode which is then executed within an ES6 runtime environment.

If this doesn't sound enough like science fiction to you, then think about it like this: this project will run your ECMAScript 6 code inside its own space-time continuum that allows legacy browsers to support ECMAScript 6 features.

Brandon has already implemented a slew of ES6 features, but hasn't yet added support for array comprehensions, tail call optimisation, or the binary data API. What you do get, however, is destructuring assignment, spread in arguments and array initializers, "rest" parameters, classes and super, arrow functions, and even Map, Set, and WeakMap.

If you want to get an idea of how this project works, take a look at the engine/assembler.js and engine/runtime.js files to see the opcodes and how the stack is used.

Analytics.js

Analytics.js (GitHub: segmentio / analytics.js, License: MIT) from Segment.io is a simplified API for supporting various web analytics services, including Google Analtyics, KISSmetrics, Mixpanel, and Chartbeat.

It provides a single API for defining events that should be tracked, allowing you to focus on getting the data out of activities on your site without becoming bogged down in a given service's implementation peculiarities.

Segment.io also made Socrates.io, which seems to be very popular. I recommend keeping an eye on the GitHub Segment.io account for more cool projects.

MaskJS

MaskJS (GitHub: tenbits / MaskJS, License: MIT) by Alexander Kit is a template engine for Node and browsers. The author has built it with performance and mobile devices in mind, and has a jsperf benchmark that compares it against other template engines.

It supports custom tags, which are designed to help encapsulate markup into reusable components, and the author has created some for two-way data binding. The best way to get a feel for the markup style and API is to check out the MaskJS examples.

Featured

frameworks libraries templates responsive

Mote.js, Resizer, o_O, JLS

Posted on .

Mote.js

Mote.js (License: MIT, GitHub: satchmorun / mote, npm: mote) by "satchmorun" is a Mustache implementation with some impressive benchmarks. It runs in both Node and browsers, and usage should look familiar to users of existing Mustache engines:

var normal = mote.compile('escaped: {{data}}')  
  , triple = mote.compile('triple: {{{data}}}')
  , ampersand = mote.compile('ampersand: {{&data}}')
  , data = {data: '& " < >'};

normal(data);    //=> 'escaped: &amp; &quot; &lt; &gt;'  
triple(data);    //=> 'triple: & " < >'  
ampersand(data); //=> 'ampersand: & " < >'  

Mote passes the Mustache spec, except for the optional lambda functionality:

var keyFn = mote.compile('{{#lambda}}Hello, {{name}}.{{/lambda}}')  
  , data = {
      name: 'Arthur Dent',
      lambda: function(fn) {
        return fn() + ' ' + fn().toUpperCase();
      }
    };

keyFn(data); //=> 'Hello, Arthur Dent. HELLO, ARTHUR DENT.'  

Resizer

Resizer logo

Resizer (GitHub: egdelwonk / Resizer) by William Golden is a bookmarklet designed to aid responsive design. Popular resolutions for mobile devices are included so it's easy to switch a page between a tablet view, desktop, and mobile. The current page can also be reloaded or reset.

There's even a Resizer Chrome Extension, for those of us who prefer buttons to the extra screen real estate added by bookmark bars.

o_O

oO (License: _MIT) by Jonah Fox is a new HTML binding library that draws on the simplicity of Backbone.js's collections, and the bindings of Ember and Knockout. The main methods provided by the library are property, bind, and collection:

var name = o_O.property('John');  
o_O.bind(name, '#person');

// HTML text is now 'John'
name('Bob')

// HTML text is now 'Bob'

It ships with Mocha tests, and has been tested in IE 7,8,9, Chrome 16, Firefox 4 and Safari 5.

JLS Updates

JLS (License: LGPL) is a JavaScript platform that we've featured previously on DailyJS in Gestures, Scopeleaks, Wink, JLS, JavaScript Blogs. The authors have been working on it over the last year, and have recently released a whole load of new features:

  • More Web Browser GUI support: button, edit, table, etc.
  • Native image manipulation: subsampling, convolution, EXIF support
  • Simple XML Exchange (SXE) support for native, web browser and PHP
  • SQL support since 0.4 (for MySQL)
  • AMD is now used for defining and loading the framework's classes