A small project that shows how to use webpack + backbone for client-side development in ES6 and sync data with server (nodejs/express + mongodb). This project is written in ES6-code with the using backbone.
To develop SPA with the following functionality:
- User's registration and authorization.
- Unauthorized users (guests) can only register, all other function is available only authorized users.
- Displays a list of entities (see. picture above). This list will be loaded from the server in JSON format using the AJAX-request (you can create your own server, or use a cloud database with the REST API interface).
- Each entity must have at least the title, a short description and state of the Like (or likes counter).
- When you click on "X", corresponding card is removed from the page (using any jquery effect) and sent a request to delete the card from the server.
- Clicking on the "Like" - changing design of labels and sent a request to the server to make the appropriate changes.
- Like state must be associated with the authorized user.
- Adding and editing entities are available users with
admin
role.
Extra points:
- Use modular approach.
- Application must be single page.
- When you refresh the page, it's displayed with the specified URL route.
- Install nodejs
- Install mongodb (for ubuntu 14.04)
- Run follow code in terminal:
git clone https://github.com/exportdefault/backbone-stickers.git
cd backbone-stickers
npm install -g webpack bower
npm install
cd public && bower install
- For built once JS, SCSS files you can start webpack in terminal. If you want that watch files continuously, rebuild incrementally whenever one of them changes, using
--watch
.
webpack
webpack --watch
- For run server and test functionall run server and then then go to
http://localhost:4311/
(You can change port inserver/config
.
node server/server.js
lalala ...
For simplify some backbone component was extended.
lalala ...
For client-side authentication use technics like CSRF headers in authentication requests to prevent forgery, global session model in backbone, auth state persistence through signed cookies and model validation (@todo).
In the server-side, we use the CSRF Express.js middleware
, and then with Handlebars templating engine to render the initial HTML wrapper with this token, like:
<meta name="csrf-token" content="{{csrfToken}}">
In the client side use Session model we can extract this token from meta tag using jQuery like
let token = $('meta[name="csrf-token"]').attr('content');
There's singelton SessionModel to manage state. Views and other models all can subscribe to changes in session state and extract current authorizate user data:
app.session.on('change:logged_in', this.onLoginStatusChange);
var message = 'Logged in as ' + app.session.user.get('username');
The server-layer is a lightweight, single-file Express.js HTTP server and MongoDB. It responds to a number of typical authentication API routes, as well as renders the initial index.html
page wrapper to plant the session CSRF token. Ofcause, it’s a good practice to have an isolated User/Auth model in the server which handles validations and database interaction, but for simplicity this functionality is encapsulated inside API handlers (at the controller-level).