Future of Web Development:
Theory and case studies
Timur Poperecinii
@Monomachus
@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!"
"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 ....
OR
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
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
DEMO: Video Tag
- Setting in Chrome : Show ShadowDOM
ShadowDOM
My name is DOM, Shadow DOM
http://www.polymer-project.org/platform/shadow-dom.html
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
Thank you!
Q&A