Hybrid Application Development
-
Upload
yagiz-nizipli -
Category
Documents
-
view
353 -
download
3
description
Transcript of Hybrid Application Development
Using Jade, Stylus and NodeJS Together with Grunt
Hybrid App Development
Yagiz NizipliSoftware 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
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
Using Stylus with setting variablesAn everyday stylus use
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 filegrunt.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' }] } },});
Any questions?