Future of Web Development:
Theory and case studies



Timur Poperecinii
@Monomachus

Attendees

shouldn't be like

Or

like

They should feel like


Or

like this

Introduction


  • Our technological field is moving FASSST
  • We need to react somehow
  • Foresee the future, see the patterns and adjust
             

Interesting Quote


    "Well, in  our  country," said Alice, still panting a little, "you'd generally get to somewhere else - if you ran very fast for a long time, as we've been doing." 
"A slow sort of country!" said the Queen. "Now, here, you see, it takes all the running you can do, to keep in the same place. If you want to get somewhere else, you must run at least twice as fast as that!" 

LEWIS CARROL, Alice from Wonderland




Tools

Tools: Theory


We'll have a totally new set of tools that will:

  • Get out of our way 
  • Help us understand someone else's code
  • Understand semantically code changes




DEMO: Chrome Dev Tools

  • Pretty Print
  • Replay XHR
  • Debug on XHR
  • find in all scripts ()
  • Emulate touch events
  • and many more ....

https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks
OR
http://bit.ly/chromedevtoolstricks

DEMO: PageInspector


Particularities

  • Only available for ASP.NET, but hopefully more and more tools like this will appear
  • possibility to create 2 way connections via SignalR (.NET layer of  WebSockets)

DEMO: SemanticMerge


Source code diff and merge based on language parsing, designed to deal with code that has been moved and modified.

Right now works only with C# and Java,  because it is easier to do this with 
static typed languages. Are also working on C++, JS  implementations
URL:  https://www.semanticmerge.com/



Technologies

DISCUSSION


Q: is Web still the way to go?



My Opinion


YES, because we see apps

  • for mobile devices (mobile web sites)
  • crossplatform apps using PhoneGap and other  technologies as KendoUI, SenchaTouch
  • Windows 8 Apps : one of the options is applications  

created in HTML, CSS and JS 

Crazy Idea: I think some time soon the views for iOS, Android and other mobile apps will be writen in pure HTML and CSS 

 

Trends


If someone (n00b) asks 
you what to learn in 2014+

say

Any general purpose language
 of your choice and 
Javascript

New technologies used



  • Ecmascript 6 (aka Harmony) knocking on the door
  • Compilable languages to JS: CoffeeScript, Dart, TypeScript
  • Compilable languages to CSS: LESS, SASS
  • SVG
  • WebGL
  • HTML5 and CSS3 (partly implemented by all major browsers)

Case Study: Web Components


“the vision is clear”  => 
“elegant user interfaces that work across all form factors.”

  • Who:  The W3C team - Dimitri Glazkov and Ian Hickson, supported by Google team
  • What:  Web Components are essentially a set of static templates that make it possible to create rich web user interaction (UI) using CSS and HTML markup only.
  • Why:  Web components will allow web developers the freedom to create embedded widgets and reusable libraries and frameworks.

Problem we're trying to solve


Rob Dodson presentation

http://robdodson.me/webcomponents-cascade/#/5
http://www.webcomponentsshift.com/#11

DEMO: Video Tag


- Setting in Chrome : Show ShadowDOM


ShadowDOM

My name is DOM, Shadow DOM


http://www.polymer-project.org/platform/shadow-dom.html

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

A particularly pernicious aspect of the lack of encapsulation is that if you upgrade the library and the internal details of the widget’s DOM changes, your styles and scripts might break in unpredictable ways



Frameworks


Theory: Modern Frameworks 


Characteristics:

  • Bundling of resources
  • Intelligent view templating engine
  • seamless integration with existing CSS frameworks as Bootstrap
  • being responsive
  • DOCUMENTED !!!

Theory: Future Frameworks


  • will use the latest and greatest technologies
  • will be fast
  • will work on all browsers (don't forget the mobile)
  • more and more work is done on client-side
  • more and more API-like applications (SPA or not, it depends)

Case Study: DurandalJS

Durandal has the features you need 
to build whatever apps you can imagine; 
the apps of today and of tomorrow.  - durandaljs.com



  • Who: Rob Eisenberg, already an expert in building frameworks. His frameworks Caliburn and Caliburn.Micro (XAML technologies) are used in thousands of companies  
  • What:  Durandal is a lightweight JavaScript framework designed to make building Single Page Applications (SPAs) simple and elegant. It has strong support for MVC, MVP and MVVM .
  • Why:  based on current tools(Jquery, KnockoutJS, RequireJS), but built for future.

Case Study: Durandal


Durandal is built to handle the plumbing and makes it easier for me to focus on building rich webs apps with JavaScript faster. Only when you've written SPA's without Durandal do you realize how much it saves you!                              John Papa, Author & Microsoft Regional Director

What else?

  • use web components, JS Observables, Polyfils
  • are preparing 3 videos each of those will create a complete from scratch application built in DurandalJS so you could see how to use it. These won't be sold for free.
  • SPA experts do consider Durandal a very good framework.


DEMO: Durandal Starter Kit

In the same way that Durandal uses RequireJS for modules, it uses Knockout for data-binding and jQuery as its browser abstraction.

Hidden insight


Because Durandal is built on technologies of the future, once these will be implemented on browsers...
  • Durandal becomes lighter: all the polyfill code goes away
  • Durandal becomes faster: browser implementation of the standards are a lot more performant than the JS polyfills.

Conclusion:


We have lots of JS frameworks, new Web standards,  HTML5 and CSS3 become more and more implemented in different browsers.
Every time  a new framework comes out I am like


Conclusion:

We should select what subjects are we learning and try to maximize our value from our time. Selecting a solid and a popular technology could save you TIME, MONEY and NEURONS

When I use the technology I learnt, in a real project, I am happy :) 

Links

  1. semanticmerge.com
  2. http://css-tricks.com/modular-future-web-components/
  3. http://durandaljs.com/

Thank you!

Q&A
Made with Slides.com