×
Get in touch

Get in touch with Binary

Binary Studio website uses cookies to enhance your browsing experience. By continuing to use our site, you agree to our Privacy Policy and use of cookies.

Learn more more arrow
Agree
Michael Morozov PHP Developer 27.03.2014

PHP Developer’s Revelation Or How To Write Simple Web-Application In Javascript Only


Original:http://m1x0n.blogspot.com/2014/03/php-developers-revelation-or-how-to.html

To write this article I needed a lot of inspiration, so I want to thank everyone I owe my inspiration.  I was inspired by @boo1ean who showed me some Backbone's magic and due to who I started perceiving  js from another perspective. Also thanks to @msemenistyi who proposed to look deeper in Node.js. And also thanks to Okean Elzy for the great music atmosphere that accompanied the whole process.

So what is the audience of this article? I think it'll be helpful for people who started learning server side programming using Node.js like me :), for people who got acquainted at least a bit with Node and NPM and for others who partially use js. I'm not a JS-guru but the challenge is accepted.

Let's start. Make sure you have the latest node and nmp installed. We're going to write simple as door TODO application using next js technologies:

· Express.js - web application framework for Node. (It's like Zend for PHP).

·  Sequelize - ORM for Node environment (Well known analogs for PHP are Eloquent and Doctrine).

·  PostgreSQL - as storage engine.

To be honest we will modify for our needs turorial from Sequelize website. So what is the architecture of our app like? We will delegate it to manipulate TODO instances via CRUD. That's why we need to create database in Postgres and create there a table in order to store described instances. If you haven't yet installed postgresql server,please, install it. There is an example below:

If you are new to PostgreSQL you can take a look at this tutorial. Here serial is analog to MySQL's autoincrement and varying char is the same as VARCHAR(?).
And some forewords about UI. Our app will have next UI:

JS single application mockup.png

Here we will submit new items from sibling input via 'Add' button and connected input to it. When new item appears it appends to list as read-only input which will be activated by double clicking on them.
Now we can switch to writing an application. First of all let's create app folder and install express.js via npm. Then ask express to create skeleton app structure which we're going to modify later. For doing this you need to run following commands in your command line:

 

 

After that we will receive following project structure:

JS single application project structure.png

You're able to run Express skeleton app using node app.js and see result by entering localhost: 3000 in your browser's address bar.
In order to install PostgresSQL db connector and Sequelize, please, run following commands:

--save option instructs NPM to include the package inside of the dependencies section of your package.json automatically.

Let's write main app file app.js. Here we require all necessary dependency modules, create express app and define server variables like port, template render engine etc.:

 

Then map routes to controller’s actions. Express has special methods for handling HTTP requests. The similar routing way you can find in PHP framework Laravel.

 

And finally make db connection and create server.

 

Next step: we create models loader models/index.js. The purpose of this file is to collect all models modules in db variable in order to provide access to them in other modules (e.g controllers aka routes) of our application. Actually I forked this module from tutorial and left it "as is". But there is one important thing like db connection. It's not so complicated. We just provide db credentials and specify dialect. FYI Sequelize is able to work against MySQL, SQlite and MariaDB too. Below is an example of db connection:

 

Our next point is Todo model definition via Sequalize interface.

 

Due to Sequelize ability of creation db schema via migrations on first app run let's disable some options like paranoid mode which allows creating additional timestamp fields (createdAt, updatedAt). Also we are able to specify actual table name. As for DataTypes we will use only STRING in our simple example. The other types you can find at Sequalize documentation page. Now we are closer to controllers (routes) checkpoint. In our app we will have two of them:

· index.js - which handles our index page. On this page we will render main layout and all todo items;

· todo.js - which methods reflect our actions on todo items.

Controller index.js will helps us retrieve all TODO items and render them via Node template engine - Jade

Sequelize provides different kinds of finders like find, findAll, findOrCreate.

 

Template index.jade is the main content block for layout.jade. In index.jade we're going to render TODO item list, new TODO input and action button. In layout.jade we define our common html page markup, add stylesheets, specify additional js libraries like jQuery and do other necessary things.  On application running via node app.js all jade templates will be compiled in html ones. Examples of layout.jade and index.jade are placed below:

 

Usually passed template's variables have simple access to them and jade is not an exception. Unfortunately it's not a jade tutorial. For more information, please, read Jade's reference.
Let's see todo.js controller.

 

The main point here is request handlers. For each of them we do some manipulations with database. In order to create new install of Todo we call Sequelize's create method and specified attribute text which we can retrieve from requests bo