Skip to content

Introduction

Jump to bottom
Joel edited this page Sep 25, 2016 · 3 revisions

SPA jQuery

Simple SPA js framework based on jQuery.

Why

It's simple and familar with jQuery users. Even you can use jQuery code in this framework.

Most front-end developers are familar with jQuery, but jQuery doesn't support architecture. Just make things possible, getting messed often. To solve this problem, some people suggest huge and new framemworks and libraries such as AngularJS, Amber, React. But learning these heavies are very tough. I suggest SPA jQuery.

What you only need are:

  • jQuery skills
  • Node.js
  • Terminal to run Node command
  • Web browser to see what's going on

Preview example

<!--UserList.html-->
<ul></ul>
<!--UserListItem.html-->
<li></li>
var SPA = require('spa-jquery');
var Component = SPA.Component;

Component.define('UserList', {
  users : [],
  
  render : function(){
    var $self = this;
    
    Component.create('UserListItem').times(this.users).then(function($userListItems){
      $userListItems.forEach(function($item){
        $item.update({
          user : user
        });
      });
      
      $self.append($userListItems);
    });
  }
});

Component.define('UserListItem', {
  user : null,
  
  render : function(){
    this.text(this.user.name);
  }
});

Component.create('UserList').then(function($userList){
  //Root component is a child of <body> generated by Component automatically
  Component.getRootComponent().append($userList);
});

Clone this wiki locally