hybrid application development
DESCRIPTION
Hybrid Application Development with Grunt, Jade and Stylus templating engines.TRANSCRIPT
![Page 1: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/1.jpg)
Using Jade, Stylus and NodeJS Together with Grunt
Hybrid App Development
Yagiz NizipliSoftware Engineer
![Page 2: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/2.jpg)
My Past
Computer engineer, musician, geek. But what have I really been doing for the past 2 years?
![Page 3: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/3.jpg)
Open-Source Initiative
❖ Always a fan of open-source projects.
❖ github.com/anonrig
![Page 4: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/4.jpg)
Grunt - The Javascript Task Runner
❖ Automation
❖ Minification, unit testing, linting
❖ Test-driven programming
❖ Step by step compilation
![Page 5: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/5.jpg)
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');
![Page 6: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/6.jpg)
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>
![Page 7: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/7.jpg)
❖ 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()}]
}
![Page 8: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/8.jpg)
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.
![Page 9: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/9.jpg)
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?
![Page 10: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/10.jpg)
An example Jade code
Jade HTML5
![Page 11: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/11.jpg)
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?
![Page 12: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/12.jpg)
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
![Page 13: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/13.jpg)
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.
![Page 14: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/14.jpg)
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' }] } },});
![Page 16: Hybrid Application Development](https://reader035.vdocuments.site/reader035/viewer/2022062709/558e446b1a28ab88668b4722/html5/thumbnails/16.jpg)
Any questions?