Javascript data binding

Data binding is rather different than what jQuery did(DOM manipulation).

The most popular frameworks for now


React is One-way data binding library.

  • Lots of people use React as the V in MVC.

  • Virtual DOM to boost performance

  • one-way reactive data flow: React will automatically manage all UI updates when your underlying data changes. It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.

  • Composable Components: With React the only thing you do is build components. Since they’re so encapsulated, components make code reuse, testing, and separation of concerns easy.

  • JSX: a JavaScript syntax extension that looks similar to XML which lets you create JavaScript objects using HTML syntax

  • props vs state: “props” which is immutable parameter passed from parent, “state” is internal state of component.

  • What Components Should Have State? Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.

Try to keep as many of your components as possible stateless. By doing this you’ll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.


AngularJS is a full MVC framework

  • two-way data binding

  • reusable components


Google Polymer is the de-factor starndard for JS web components SPEC.


Node.js mvc and rest framework

Node.JS MVC & REST frameworks


The most popular framework,it is rather easy to go with express for web development. But still callback hell.


Meteor is the best real time framework so far, currently is tight bound with MongoDB. Also

  • DDP

  • Mongodb&Minimongo

  • ACL


Sails is another full stack framework based on Express, it default bundles ORM Waterline to support both DBMS and

MongoDB.Sails comes with blueprints that help jumpstart your backend REST API without writing any code.


loopback is backed by commercial company StrongLoop(which is behind Express), which is based on Express and mainly focus on buildindg REST

API, support both DBMS and MongoDB.


TJ created Koa to complete with Express,no middleware is locked in by default. It internally use ES6 generators to avoid

callback hells.

The problem for Koa seems lack of a good document.


Admin interfaces

There are some admin panels let you quickly deploy a backend management/dashboard tools.


AdminLTE is Admin control Panel Theme That Is Based On Bootstrap 3.x, only with client side.

Keen IO







sb admin2

Django Admin

This is the killer feature for django framework.

Django xadmin

django-xadmin Drop-in replacement of Django admin comes with lots of goodies, fully extensible with

plugin support, pretty UI based on Twitter Bootstrap.

Django Admin Bootstrap

django-admin-bootstrap A Django admin theme using Twitter Bootstrap.

It doesn’t need any kind of modification on your side, just add it to the installed apps.

Django Admin2

Django Admin2 Extendable, adaptable rewrite of django.contrib.admin.

Flask Admin

flask admin Simple and extensible administrative interface framework for Flask.


ng-admin is an AngularJS admin GUI to any RESTful API. It only depends on your REST API, it does not

care which database are used now.


rdash-angular is another AngularJS implementation of the RDash admin dashboard theme.


mongo-express Web-based MongoDB admin interface, written with Node.js and express.


charisma Free, responsive, multiple skin admin template


KeystoneJS is a famous CMS with Node.JS with admin panel written with ReactJS.

Http server for development

HTTP Server for local development

Python Web Server

If you installed Python, then you can start a simple HTTP server:

python -m SimpleHTTPServer 8080


Support both linux and windows now


Node http server

npm install -g http-server


caddy is a cross-platform HTTP Server written with Go


nanohttpd is an embedded HTTP Server for Java.



The above two both support embed usage.

Of course you could use IIS for free on Windows.



Android development resources

Android Development Resources

The concept you need to know for Android beginners

  • AVD(Android Virtual Device)

  • SDK Manager

  • Context

Core Android Application Components

  • Activity: The “C” of MVC, interact with layout

  • BroadcastReceiver

  • Service

  • ContentProvider

UI Components

  • View: UI Widgets

  • Layout Manager(ViewGroup): container of View

  • Fragment

Android Manifest

  • AndroidManifest.xml

  • Permissions

Andorid default does not allow network access, you need to add these lines to manifest:


  • Resource IDs and


Intent is a powerful concept within the Android universe. An intent is a message that can be thought of as a request that is given to either an

activity within your own app, an external application, or a built-in Android service.

Think of an intent as a way for an Activity to communicate with the outside Android world. A few key tasks that an intent might be used for within

your apps:

  • Take the user to another screen (activity) within your application

  • Take the user to a particular URL within the Android web browser

  • Take the user to the camera to have them take a picture

  • Initiate a call for the user to a given number

Action Bar

The ActionBar is a consistent navigation element that is standard throughout modern Android applications. The ActionBar can consist of:

  • An application icon

  • An application or activity-specific title

  • Primary action buttons for an activity

  • Consistent navigation (including tabbed UI)

You need to define action buttons in /res/menu XML.


ToolBar was introduced in Android Lollipop, API 21 release and is a complete replacement to ActionBar.It’s a ViewGroup so you can place it

anywhere in your layout. ToolBar also provides greater control to customize its appearance for the same reason.

The things you cannot do in UI thread

  • Opening a Socket connection (i.e. new Socket()).

  • HTTP requests (i.e. HTTPClient and HTTPUrlConnection).

  • Attempting to connect to a remote MySQL database.

  • Downloading a file (i.e. Downloader.downloadFile()).

When you debug Android APP on real device, you need first enable “USB Debug” on device. Then install USB driver on PC.

When you run APP directly on Mi 3C, you need first make sure your device turn on USB debug mode.

You just need to “Run” in Android Studio, and select the real device.


Android Official Toturial Chinese

Android Toturil

Coursera Android


Android Open Project

Android UI

Android Bootstrap

Awesome Android



Android Best Practice