Web Development: Making it the right way
•Download as PPTX, PDF•
1 like•324 views
Web Development: Making it the right way presentation for Google Developer Festival 2014
Recommended
More Related Content
What's hot
What's hot (17)
Similar to Web Development: Making it the right way
Similar to Web Development: Making it the right way (20)
Recently uploaded
Recently uploaded (20)
Web Development: Making it the right way
- 1. Using Jade, Stylus and NodeJS Together with Grunt Web Development: Making it the right way Yagiz Nizipli Software Engineer
- 2. My Past Computer engineer, musician, geek. But what have I really been doing for the past 2 years?
- 4. Open-Source Initiative ❖ Always a fan of open-source projects. ❖ github.com/anonrig
- 5. Grunt - The Javascript Task Runner ❖ Automation ❖ Minification, unit testing, linting ❖ Test-driven programming ❖ Step by step compilation
- 6. 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 Node.Js with Grunt is using file stream library in Node.Js. ❖ Require it using: var fs = require('fs');
- 7. 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>
- 8. ❖ Local, test and production local: { input:"www/index.html", output:"www/index.html", tokens: [{ token: "<environment/>", string: fs.readFileSync(‘src/config/local.js').toString() }] }, test: { input: "www/index.html", output: "www/index.html", tokens: [{ token: "<directives/>", string: fs.readFileSync('src/config/test.js').toString() }] }, production: { input: "www/index.html", output: "www/index.html", tokens: [{ token: "<directives/>", string: fs.readFileSync(‘src/config/production.js').toString() }] }
- 9. 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.
- 10. 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?
- 11. An example Jade code Jade
- 12. 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?
- 13. 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
- 14. 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.
- 15. 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' }] } }, });
- 16. Sample project demo github.com/anonrig/gjs-example
- 17. Thank you for listening. Any questions? Yagiz Nizipli yagiznizipli@me.com github.com/anonrig yagiz.nizipli.com