Experiment No. 4: KJSCE/IT/TYBTECH/SEM VI/DF/2018-19

KJSCE/IT/TYBTECH/SEM VI/DF/2018-19
Experiment No. 4
Title: Meteor app development to demonstrate the

push MVC.
(Autonomous College Affiliated to University of Mumbai)

Batch:A1 Roll No.:1614012 Experiment No.:4
Aim: Demonstrate the process of meteor app development and display features of meteor.
--------------------------------------------------------------------------------------------
Resources needed: Meteor
Theory:
Meteor is a full-stack JavaScript platform for developing modern web and mobile applications.
Meteor includes a key set of technologies for building connected-client reactive applications, a
build tool, and a curated set of packages from the Node.js and general JavaScript community.
 Meteor allows you to develop in one language, JavaScript, in all environments:
application server, web browser, and mobile device.
 Meteor uses data on the wire, meaning the server sends data, not HTML, and the client
renders it.
 Meteor embraces the ecosystem, bringing the best parts of the extremely active
JavaScript community to you in a careful and considered way.
 Meteor provides full stack reactivity, allowing your UI to seamlessly reflect the true state
of the world with minimal development effort.
Step to create a project:
To create the app, open your terminal and type:
>meteor create myapp
Run it locally:
cd myapp
meteor npm install
meteor
# Meteor server running on: http://localhost:3000/
Results: (Screen shots of application development steps, program code and web browser
displaying the specified message.)
Main.html
<head>
<title>1614012</title>
</head>
<body>
{{> header}}
{{> article}}
{{> footer}}
</body>
<template name="header">

<header>
<center>
<h1>{{app_title}}</h1>
<p><i>~{{developer}}</i></p>
</center>
</header>
</template>
<template name="footer">
<footer>
<center>
<p>©Jash Gopani</p>
</center>
</footer>
</template>
<template name="article">
<article>
<p>This is a simple meteor application developed as an experiment of a course
called <b>Development Frameworks</b></p>
<p>Here is a list of all the items that are present in array of the helper of
this template</p>
<ul>
{{#each value in array}}
<li>{{value}}</li>
{{/each}}
</ul>
<p>Below is the content of another template named <b>lorem</b></p>
{{> lorem}}
</article>
</template>
<template name="lorem">
{{#each p in paras}}
<p class="lorem">{{p}}</p>
{{/each}}
</template>
Main.css
body {
margin: 0px;
padding: 0px;
font-family: sans-serif;

header{
margin: 0px;
padding: 0px;
background: #fdcab0;
}
header h1{
padding: 0px;
margin:0px;
}
article{
margin: 0px 20px;
padding: 0%;
height: 70vh;
text-align: center;
background:whitesmoke;
}
article ul li{
list-style-type: none;
display: inline-block;
}
article ul{
padding: 10px;
border-left: 5px solid orange;
background: lightgoldenrodyellow
}
footer{
position: absolute;
width: 100%;
background: #0abcdf;
bottom:0px;
}
.lorem{
padding: 10px;
border-left: 5px solid green;
background: lightgreen;
}

Main.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
Template.body.helpers({
page_title:"shutter0_0eye",
});
Template.header.helpers({
developer:"Jash Gopani",
app_title:"A simple Meteor.js application"
});
Template.article.helpers({
array : ["INS","DF","MES","MP"],
});
Template.lorem.helpers({
paras:[
"Framework lies upon development. Development cooperates beside framework.
Framework commands development opposite the clarifying baffle. Can a bearded
mystic jam framework?",
"A useful buffer stares behind framework. Development staggers around
framework. Framework builds development without a key. A fringe knifes
development. The inside distress finances development. Framework entertains
development beneath the terminator.",
"The pole breezes outside the dip! An easier helmet disposes of dear. Can a
miracle strike around yes? Dear cores yes. Should yes paper the trap? Dear
tackles a going occurrence against the obsolete blurb.",
"The damage sleeps after a noble! Yes whistles throughout dear. Yes uprights
a diet into a breakdown. The suggested attitude changes. Yes sneaks underneath
dear. Yes treads the wider lung."
]
});

____________________________________________________________________________________
Questions:
1. Explain advantages of meteor.
Ans=> Simplicity
If you are a novice in the world of JS frameworks, Meteor is the better option to start your
learning process. The reason to opt for the very framework is its full-stack characteristic.
Otherwise speaking the comprehension of both client and server-side web creation process will
be complete and extensive on the example of a single platform and a single language.
Beginners are free of possible complex concepts that may cause the biggest trouble in early
stages of learning. The framework offers a clear documentation in addition to well-established
programming conventions.
Abundance of Packages and Libraries

An extended functionality of the described framework is achieved due to its foundation
represented by the jQuery JS library in combination with Underscore.js. Such libraries as
Tracker and Blaze make their contribution to frontend elaboration.
Third-party packages won’t deliver any troubles either. A complete set of the Meteor packages
is represented by Atmosphere.js. All of them are reliable, up-to-date and highly-sought among
numerous engineers working with the framework.
Seamless Client-Server Communication

We have already mentioned that jQuery is responsible for client part of web development. The
server side is provided by Node.js. In this structure, Meteor ensures a seamless real-time

communication between both sides. If you got used to relying upon the representational state
transfer APIs or publish-subscribe code, you can enjoy the automation provided by Meteor.
Debugging
It would be wonderful to have a tool to debug apps built with Meteor, as well as to perform
such functions as removal of collections, display of client-side docs, modification of
documents, and management of subscriptions. In fact, such tool exists and is called WebStorm.
Besides, a server-side debugging is also supported.
Outcomes:
Demonstrate the use of frameworks in developing applications
Conclusion: (Conclusion to be based on the objectives and outcomes achieved:
In this experiment we developed a simple meteor js application from scratch. The meteor
framework is a push mvc framework which means that the server automatically pushes the
updates to the client and the client side is automatically re-rendered which is very convenient
for developing web-applications. In this experiment we used templates and helpers for
displaying UI components on the html page and styling was done by css.
Grade: AA / AB / BB / BC / CC / CD/DD
Signature of faculty in-charge with date
References:
1. By Isaac Strack; “Getting Started with Meteor.js JavaScript Framework”, 2nd Edition
;Packt Publishing, June 2015

Experiment No. 4: KJSCE/IT/TYBTECH/SEM VI/DF/2018-19

Uploaded by

Copyright:

Available Formats

Experiment No. 4: KJSCE/IT/TYBTECH/SEM VI/DF/2018-19

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experiment No. 4: KJSCE/IT/TYBTECH/SEM VI/DF/2018-19

Uploaded by

Copyright:

Available Formats

KJSCE/IT/TYBTECH/SEM VI/DF/2018-19

Title: Meteor app development to demonstrate the

(Autonomous College Affiliated to University of Mumbai)

Batch:A1 Roll No.:1614012 Experiment No.:4

Resources needed: Meteor

(Autonomous College Affiliated to University of Mumbai)

(Autonomous College Affiliated to University of Mumbai)

(Autonomous College Affiliated to University of Mumbai)

(Autonomous College Affiliated to University of Mumbai)

Abundance of Packages and Libraries

Seamless Client-Server Communication

(Autonomous College Affiliated to University of Mumbai)

Signature of faculty in-charge with date

(Autonomous College Affiliated to University of Mumbai)

You might also like