State of modern web technologies: an introduction
- 1. The State of Modern Web Development Technologies: An Introduction Strap yourselves in! Michael Ahearn MACS CP (October 2015)
- 3. The new “full stack” Source: http://www.100percentjs.com/visualizing-modern-web-development-stack/
- 4. Too many choices!!! There are so many tools, libraries and frameworks for modern web development out there now. I've made my decisions on what to talk about here based on: Popularity Peer/community support Proven and trusted What I know and have worked with What job agencies are looking for
- 5. What I'll be covering Presentation technologies – html and css tools and frameworks Client-side MVC frameworks Server-side frameworks Workflow and efficiency tools and frameworks Code editors (if there's time)
- 6. Presentation technologies HTML layout frameworks: Bootstrap and Foundation CSS precompilers: Less / Sass Templating libraries: e.g. Handlebars
- 7. Bootstrap or Foundation? “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” Source: http://getbootstrap.com Foundation say it is “the most advanced responsive front-end framework in the world.” Source: http://foundation.zurb.com/ Very hard to compare them. Both use grid system. Foundation seems to be easier to customise, but Bootstrap seems to be a bit more popular.
- 8. CSS Preprocessors LESS (less css): http://lesscss.org/ LESS extends CSS with dynamic behaviour such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only). SASS (Syntactically Awesome Stylesheets): http://sass-lang.com/ $serif-font-stack: "Georgia", "Times New Roman", serif $monospace-font-stack: "Cousin", "Courier" body font: normal 18px/22px $serif-font-stack pre, code font: 600 bold 18px/22px $monospace-font-stack
- 9. Templating tools Handlebars example: Source: http://jsfiddle.net/aybalasubramanian/N2b5M/1/ <script id="some-template" type="text/x-handlebars-template"> <tbody> {{#users}} <tr><td>{{fullName person}}</td> <td>{{jobTitle}}</td> <td><a href="https://twitter.com/ {{twitter}}">@{{twitter}}</a></td> </tr> {{/users}} </tbody> </script>
- 10. Client-side MVC frameworks Backbone.js http://backbonejs.org/ Angular.js https://angularjs.org/ (Google) Ember.js http://emberjs.com/
- 11. Some Angular.js concepts Directives: (e.g. ngApp, ngController, ngModel, ngRepeat) The scope object ($scope) Two-way data binding Dependency injection
- 12. Server-side Node.js: http://nodejs.org Express.js: http://expressjs.com/ MongoDB: https://www.mongodb.org/ https://docs.mongodb.org/manual/core/introduction/
- 13. Tools for efficiency npm (Node package manager). With node installed, can run npm at the command line to fetch available packages from repositories such as github and other remote servers https://docs.npmjs.com/ Bower: like npm but for the client-side http://bower.io/ Require.js: a JavaScript module loader http://requirejs.org/ Grunt: the JavaScript task runner http://gruntjs.com/
- 14. npm Once you have node installed, you can now use the Node package manager to install other software. $ npm install -g bower This fetches & installs the package bower.js, globally. If you issue this command from inside your project root folder: $ npm install express express.js will be installed in a folder called node_modules There are many options you can use with the npm command
- 15. Bower Works similar to npm, but you can use it for packages you use on the client, such as jquery, angular, underscore, handlebars etc. From your project root folder, if you issue the command: $ bower install jquery Bower will fetch & install jquery.js inside a folder called bower_components
- 16. Require.js Firstly a preamble to why we use require.js: JavaScript modules and AMD (asynchronous module definition). Modules are packages of code. Require.js is a tool used to load these modules in the sequence in which we need them in our app. Get it at: http://requirejs.org/
- 17. Why require.js? The Problem: Web sites are turning into Web apps Code complexity grows as the site gets bigger Assembly gets harder Developer wants discrete JS files/modules Deployment wants optimized code in just one or a few HTTP calls
- 18. Why require.js? The Solution: Some sort of #include/import/require ability to load nested dependencies ease of use for developer but then backed by an optimization tool that helps deployment Source: http://requirejs.org/docs/why.html
- 19. Grunt.js Grunt is defined as a “task runner”. Basically, it can automate all the tasks you routinely do with all projects, in order to deploy your app, e.g.: Convert less or sass files to css Convert CoffeeScript or TypeScript to js Run jshint on your JavaScript Run tests Minify and concatenate JS code – reducing the number of script tags in the html
- 20. CoffeeScript: http://coffeescript.org/ TypeScript: (Microsoft – but open-source) http://www.typescriptlang.org/
- 21. Code Editors Sublime text ($70 US) Adobe Brackets (open source) Github Atom (open source) Microsoft Visual Studio
- 22. Brackets Pros: Free, open-source, cross platform Clean, modern UI. Ability to split panes Live preview (big bonus!) Lots of plugins to expand it's capabilities “Expand” plugin allows you to work with PSD files (it is made by Adobe after all!) Cons: Tabs on the left rather than top (not that important)
- 23. Atom https://atom.io/ Pros: Free, open source (MIT license), cross-platform Hackable, customisable (big community involvement) Multiple selections, cursors (huge efficiency) Integration with Github
- 24. Resources Stackoverflow: (where you get answers to any dev question, from the experts, and it's fully peer-rated – evidence-based) JavaScript Weekly: http://javascriptweekly.com/ Ng Newsletter: http://www.ng-newsletter.com/posts/