Embed Size (px)
DESCRIPTION
Hybrid Application Development with Grunt, Jade and Stylus templating engines.
Citation preview
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?
