Server Side Javascript has come long way, and after launch of Node.js in July 2011 gained lot of popularity as idea of using same language on client and server bought in code and software architecture uniformity in software applications. Even though Brendan Neich‘s Netscape already had vision to use same programming language on client and server but at that time people were using Pentium I/II processors which were not powerful enough to support Javascript Interpreters. In case you don’t know Brendan Neich he’s creator of Javascript and co-founder of Mozilla. In present generation of more than 2 billion smartphones you can get Phone with 1.2 GHz processor for less than $40. Seeing boom in processing speed of devices software developers started integrating Javascript interpreters like SpiderMonkey & Rhino in their applications. Some started using Jaxter server that embeds entire Mozilla Firefox Browser Engine in web server giving access to Ajax and Javascript within application.
Now when we have brief history of Javascript let me explain how to setup Meteor and create a simple server side Javascript application.
Go to this link and install Meteor.
Once you are done with setup go to command like and create a directory named bluefish if you would like to follow remaining series of tutorial.
Nikhils-MacBook-Pro:bluefish nikhil$ meteor create bluefish Created a new Meteor app in 'bluefish'. Nikhils-MacBook-Pro:bluefish nikhil$ cd bluefish/ Nikhils-MacBook-Pro:bluefish nikhil$ meteor Started proxy. Started MongoDB. Started your app. App running at: http://localhost:3000/
Now navigate to http://localhost:3000/ and if everything if fine you will see following webpage-
Now you can use your favourite code editor to change HTML and CSS and see if changes are getting reflected in your application without refreshing browser. If you can see updated HTML in your browser, congrats you deployed your first Javacsript Server Side Application. It’s called hot code push.
Now lets dig in a little and make our first bluefish list.
Edit your HTML and change it to
<head>
<title>bluefish!</title>
</head>
<body>
<div class="container">
<header>
<h1>bluefish!</h1>
</header>
<ul>
{{#each fishes}}
{{> fish}}
{{/each}}
</ul>
</div>
</body>
<template name="fish">
<li><img src={{imageurl}} height="80" width="100"/>{{text}}</li>
</template>
Change your Javascript to
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
fishes: [
{ text: "pygmy angelfish",imageurl:"http://www.seascapestudio.net/reference/fishes/centropyge_argi.jpg" },
{ text: "blue dot grouper",imageurl:"http://www.richard-seaman.com/Underwater/Egypt/Highlights/PeacockGrouper.jpg" },
{ text: "blue line grouper",imageurl:"http://www.aquariumdomain.com/images/fish_marine/grouper_blueline2.jpg" },
{text: "teira batfish",imageurl:"http://www.aquariumdomain.com/images/fish_marine/tieraBatfish8.jpg"},
{text: "convict blenny",imageurl:"http://www.roslyndakin.com/wp-content/uploads/2011/01/convictadult.jpg"}
]
});
}
You can write your custom styling in CSS file.
For further information, visit https://www.meteor.com/tutorials/ or wait for next chapter of tutorial. Happy coding!
Image credits-
http://www.seascapestudio.net/
http://www.richard-seaman.com/
http://www.aquariumdomain.com/
http://www.aquariumdomain.com/
http://www.roslyndakin.com/
References-
https://developer.mozilla.org/ja/docs/Web/JavaScript/Server-Side_JavaScript
https://www.meteor.com/
