Hybrid Application Development

Using Jade, Stylus and NodeJS Together with Grunt
Hybrid App
Development
Yagiz Nizipli
Software Engineer

My Past
Computer engineer, musician, geek. But what have I really
been doing for the past 2 years?

Open-Source Initiative
❖ Always a fan of open-source projects.
❖ github.com/anonrig

Grunt - The Javascript Task
Runner
❖ Automation
❖ Minification, unit testing, linting
❖ Test-driven programming
❖ Step by step compilation

Using NodeJs with Grunt
❖ Node.js is an event-driven, non-blocking i/o solution for
asynchronous application development.
❖ On top of the language Javascript.
❖ An example use for Nodejs with Grunt is using file
stream library in Nodejs.
❖ Require it using: var fs = require('fs');

An example page for our mobile
application
<head>
<title>My Application</title>
… some meta tags here …
<stylesheets/>
</head>
<body>
<script type=“text/javascript”>
myEnvironmentVariable = {};
<environment/>
</script>
</body>

❖ Local, test and
production
web: {
input:"www/index.html",
output:"www/index.html",
tokens: [{
token: "<environment/>",
string: fs.readFileSync('src/config/web.js').toString()
}]
},
test: {
input: "www/index.html",
output: "www/index.html",
tokens: [{
token: "<directives/>",
string: fs.readFileSync('src/config/test.js').toString()
}]
},
prod: {
input: "www/index.html",
output: "www/index.html",
tokens: [{
token: "<directives/>",
string: fs.readFileSync('src/config/prod.js').toString()
}]
}

Why we need a template
engine?
❖ Don’t waste time on markup languages.
❖ Reuse the code whenever it’s possible.
❖ Indentation is the key point.
❖ Use if compilation is inevitable.

Introducing Jade
❖ Jade, accessed from jade-lang.com, is a node template
engine for HTML5 and JavaScript.
❖ Enables us to use HTML without the markup
functionality.
❖ Compiles Jade code to HTML5 and JS.
❖ How?

An example Jade code
Jade HTML5

Introducing Stylus
❖ Stylus, defined by the developers, is a expressive,
robust, feature-rich CSS preprocessor.
❖ CSS without the unnecessary syntax.
❖ Enables to reuse the same CSS code for multiple rules.
❖ How?

Example Stylus code
An everyday stylus use Using Stylus with setting variables
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
fonts = helvetica, arial, sans-serif
body
padding 50px
font 14px/1.4 fonts

What now?
❖ How to compile these engines without knowing?
❖ That’s why we need Grunt.
❖ Grunt offers grunt-contrib-stylus and grunt-contrib-jade
tasks to compile both of these engines.

An example of Grunt file
grunt.initConfig({
clean: {
before: ['www/img', 'www/css', 'www/compiled']
},
jade: {
compile: {
options: {
pretty: true,
data: {
debug: true
}
},
files: [{
cwd: "src",
src: "**/*.jade",
dest: "www",
expand: true,
ext: ".html"
}]
}
},
stylus: {
build: {
options: {
linenos: false,
compress: true
},
files: [{
expand: true,
cwd: 'src/css',
src: [ '**/*.styl' ],
dest: 'www/css',
ext: '.css'
}]
}
},
});

Sample project demo
❖ github.com/anonrig/istanbul-coders

Hybrid Application Development

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Hybrid Application Development

Similar to Hybrid Application Development (20)

Hybrid Application Development