Modern web development

3,274 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,274
On SlideShare
0
From Embeds
0
Number of Embeds
1,327
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modern web development

  1. 1. Maurice de Beijer
  2. 2. What are we going to cover HTML Markup Cascading Style Sheets JavaScript Real Time Web
  3. 3. Who am I Maurice de Beijer. The Problem Solver. Microsoft CSD MVP. DevelopMentor instructor. Twitter: @mauricedb of @HTML5SupportNL Blog: http://msmvps.com/blogs/theproblemsolver/ Web: http://www.HTML5Support.nl E-mail: mauricedb@computer.org
  4. 4. HTML5 Semantic markup New HTML5 elements  <nav>  <section>  <header>  <footer>  <article>  <aside>
  5. 5. Cascading Style Sheets Lots of new useful CSS3 features Previously they would require script or extra markup  Using native CSS3 is much faster
  6. 6. CSS 3 Rounded corners .box {border-radius: 10px;} Drop shadows .box {box-shadow: 10px 5px 5px grey;} Gradients .box {background: linear-gradient(Yellow, Lime);} Transforms .box:hover {transform: scale(1.2);} Transitions .box {transition: transform 1s ease-in;}
  7. 7. CSS 3 Media queries @media screen and (max-width: 1024px) { aside { display: none; } } Multi column text article {column-count: 3; }
  8. 8. LESS/SASS = CSS done right CSS is nice but not perfect  Static  Lots of repetition LESS and SASS try to solve these problems  Define variables  Use mixins  Nest rules  Etc.
  9. 9. JavaScript libraries jQuery is the king! But these are many other useful ones  Underscore.js Functional programming support  Backbone.js Model - View - Controller  Knockout.js Model - View - ViewModel
  10. 10. Unit testing JavaScript We need to test our code  Even more important in a dynamic language Unit testing is a first must Many test libraries  QUnit is used to test jQuery
  11. 11. JavaScript is theAssembly Language for the Web
  12. 12. Compiling to JavaScript The list of languages that compile to JavaScript is long  https://github.com/jashkenas/coffee-script/wiki/List- of-languages-that-compile-to-JS Some popular static ones:  Google Web Toolkit Written in Java  Script# Written in C#  CoffeeScript  TypeScript
  13. 13. The real time web HTML5 introduces WebSockets Socket communication between browser and server  Fully duplex  But very low level Several libraries build on top of this  Socket.IO  SignalR
  14. 14. Conclusion The world of the web developer is changing  CSS3 additions mean we write less UI JavaScript  There are many powerful frameworks  Languages like TypeScript make it easier to write large applications  The real time web will make this even more responsive Embrace change!

×