node.js 101
DESCRIPTION
Node.js 101 with Rami Sayar Presented by FITC at Web Unleashed 2014 in Toronto on September 18 2014, 10:30 - 11:15am Node.js is a runtime environment and library for running JavaScript applications outside the browser. Node.js is mostly used to run real-time server applications and shines through its performance using non-blocking I/O and asynchronous events. This talk will introduce you to Node.js by showcasing the environment and its two most popular libraries: express and socket.io. TARGET AUDIENCE Beginner web developers ASSUMED AUDIENCE KNOWLEDGE Working knowledge of JavaScript and HTML5. OBJECTIVE Learn how to build a chat engine using Node.js and WebSockets. FIVE THINGS AUDIENCE MEMBERS WILL LEARN Node.js environment and basics Node Package Manager overview Web Framework, express, basics WebSockets and Socket.io basics Building a chat engine using Node.jsTRANSCRIPT
![Page 1: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/1.jpg)
Rami Sayar - @ramisayar
Technical Evangelist
Microsoft Canada
![Page 2: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/2.jpg)
• Bootstrap Layout and CSS Basics
• Responsive Web Design and Bootstrap
• Bootstrap Components, Themes
• Favorite Addons
• LOTS OF DEMOS!
![Page 3: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/3.jpg)
• Working knowledge of HTML5 and CSS3.
Note: Slides and code will be made available on @ramisayar.
![Page 4: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/4.jpg)
![Page 5: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/5.jpg)
![Page 6: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/6.jpg)
• Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• Designed for everyone, everywhere.
• Open Source!
• It's made for folks of all skill levels, SUPER EASY TO GET STARTED.
• Developed by Mark Otto and Jacob Thornton at Twitter.
![Page 7: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/7.jpg)
• Currently v3.2.0
• Supports Internet Explorer 8-11, Chrome, Firefox, Opera, Safari.
• Designed for the mobile-first, responsive Web
![Page 8: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/8.jpg)
• Building new websites and mobile web apps
• Need a quick and easy way to prettify your website/tool
• Looking to develop over a stable CSS framework with a large community. -> Bootstrap is for you.
• Do not use Bootstrap if you want a truly unique design and style.
![Page 9: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/9.jpg)
![Page 10: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/10.jpg)
• Huge community!
• Most popular project on GitHub
• 71,893 stars
• 26,883 forks
• 581 contributors
![Page 11: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/11.jpg)
HTML5 doctype
<!DOCTYPE html><html lang="en">...
</html>
![Page 12: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/12.jpg)
Bootstrap is mobile first.
<meta name="viewport" content="width=device-width, initial-scale=1">
Disabling mobile zoom (don’t do it).
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
![Page 13: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/13.jpg)
• Bootstrap sets basic global display, typography and link styles. (You can see this in scaffolding.less)
• Bootstrap also normalizes basic browser rendering using Normalize.css
![Page 14: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/14.jpg)
![Page 15: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/15.jpg)
• Responsive web design is a design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). Wikipedia
![Page 16: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/16.jpg)
• Thinking of the user’s needs instead of ours.
• Adapt to various device capabilities instead of configurations.
• Help future-proof our sites.
![Page 17: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/17.jpg)
![Page 18: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/18.jpg)
• A flexible, grid-based layout,
• Flexible images and media, and
• CSS3 media queries.
![Page 19: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/19.jpg)
• Bootstrap includes a responsive, mobile first fluid grid system that scales 12 column units to the device width size.
• The MOST IMPORTANT part of this presentation.
• Grids must be placed within a container. The container type changes behavior and sizing.
![Page 21: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/21.jpg)
![Page 22: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/22.jpg)
![Page 23: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/23.jpg)
![Page 24: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/24.jpg)
![Page 25: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/25.jpg)
![Page 26: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/26.jpg)
![Page 27: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/27.jpg)
![Page 28: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/28.jpg)
![Page 29: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/29.jpg)
![Page 30: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/30.jpg)
![Page 31: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/31.jpg)
![Page 32: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/32.jpg)
![Page 33: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/33.jpg)
• Includes 200 glyphs from Glyphicon Halflings.
• Don’t mix with other components.
• Only for use on empty elements that have no child elements.
<span class="glyphicon glyphicon-search"></span>
![Page 34: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/34.jpg)
![Page 35: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/35.jpg)
![Page 36: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/36.jpg)
<ul class="nav nav-tabs" role="tablist"><li class="active"><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">Messages</a></li>
</ul>
![Page 37: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/37.jpg)
<ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">Messages</a></li>
</ul>
![Page 38: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/38.jpg)
![Page 39: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/39.jpg)
<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>
![Page 40: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/40.jpg)
• To customize Bootstrap, you can customize Less.
• Bootstrap uses Grunt for its build system.
• grunt dist - compile CSS and JavaScript
• grunt watch - watch directory
• grunt test – run tests
• grunt – build everything and run tests
![Page 41: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/41.jpg)
• Lots of themes are available for free.
• Take a look: bootswatch.com or wrapbootstrap.com
![Page 42: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/42.jpg)
![Page 43: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/43.jpg)
• Fuel UX: http://exacttarget.github.io/fuelux/
• Bootstrap Growl: https://github.com/ifightcrime/bootstrap-growl
• Bootstrap Modal: http://jschr.github.io/bootstrap-modal/
• Bootstrap Markdown: http://toopay.github.io/bootstrap-markdown/
![Page 44: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/44.jpg)
• I was using Visual Studio 2013, you can get it for free here:• http://www.visualstudio.com/en-us/products/visual-studio-express-
vs.aspx
• And Visual Studio Web Essentials: http://vswebessentials.com/
• Includes Bootstrap Support:• Intellisense and Code Completion
• Error Detection
![Page 45: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/45.jpg)
• Bootstrap Layout Basics
• CSS Basics
• Using Bootstrap for Responsive Web Design
• Bootstrap Components
• My favorite plugins
![Page 46: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/46.jpg)
Follow @ramisayar
Tweet at me for slides/code.
![Page 47: Node.js 101](https://reader033.vdocuments.site/reader033/viewer/2022051513/547d6c0fb4af9fa2088b4694/html5/thumbnails/47.jpg)
©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.