Web Programming @ MIPT, 2015-2016

Plan

• Theory
• Angular.js
• Ember
• Backbone.js
• React
• Polymer

Architecture and coding patterns

• Quite useless to explain, because they must be understood the other way
• "Must", "should", "do" do not mean you have to obey - there are always exclusions, though it is an art to realize them
• Can be asked on interviews, so it can be reasonable to remember them

DRY

• Don't repeat yourself principle
• Every piece of knowledge must have a single, unambiguous, authoritative representation within a system
• No hardcode
• No duplicated code

KISS

• Keep it simple, stupid principle
• Extremely hard to conform for beginners, e.g. KISSing is for experienced
• Classic examples:
  • C++: "template hell"
  • Python: monkey patching; "metaclass hell"
  • Fear of deleting the old code
• "Make everything as simple as possible, but not simpler"

YAGNI

• You aren't gonna need it principle
• Implement things when you actually need them, never when you just foresee that you need them
• Do the simplest thing that could possibly work
• Requires solid implementation: working continuous integration, good unit test coverage - otherwise don't even try to follow it
• Is not applicable to some areas, e.g. scientific, healthcare, avionics, etc.

SOLID

The collection of 5 principles:

• Single Responsibility
• Open/closed
• Liskov substitution
• Interface segregation
• Dependency inversion
• Some of these can introduce too much overhead, some are not adapted to dynamic languages

Dependency Injection

• Description
• Part of Inversion of Control: don't call us, we'll call you
• Comes naturally from good test design

• Improves the abstractions
• Makes applications more configurable and hackable

• Harder to debug / trace
• Much of the logic goes to configuration files

Data bindings

Description

Model-View-Controller

• Description
• The way to separate business logic from user interaction
• Examples: ASP.NET MVC, RoR, Django
• Appeared in 1970-s

Model-View-Presenter

• Description
• Examples: GWT
• Appeared in 1990-s

Model-View-ViewModel

• Description
• Built on top of data bindings
• Appeared in 2000-s in WPF

Which of those three is best?

• Article
• Comparison
• Usually, design decisions are dictated by technical implementation details.

Single-page application

• Concept
• Main idea: completely abandon the original way websites are created and use dynamic communication with the web server (usualy, the corresponding protocol is called API)
• Superior ("responsive") user experience
• Slower to develop, harder to maintain

Single-page application

Source

Frameworks: pros and cons

• Don't reinvent the wheel every time
• Free support and help
• Many features

• Overhead; <noscript> failure
• Time to learn
• Wrong usage

AngularJS

• Official site
• Declarative syntax, powerful features
• MVC (MVVM), two-way data binding, uses dependency injection
• Began in 2009 (Google)
• Upcoming version 2 is reworked and incompatible with version 1
• Example sites: GoG.com, IndieGoGo, Gap
• Tutorials: 1, 2, 3

AngularJS

See the Pen Angular JS - Basic app by eMaj (@eMaj) on CodePen.

Ember

• Official site
• Many powerful features: CLI, ORM, Inspector, Handlebars templates
• MVC, two-way data binding
• Usable for building mobile apps
• Began in 2011
• Example sites: Yahoo, Discourse, ZenDesk
• Practice
• Tutorials: 1, 2

Ember

See the Pen Starter from Ember.js Website by Vadim Markovtsev (@vmarkovtsev) on CodePen.

Backbone.js

• Official site
• Minimalistic, compact, does not force anything
• MVP, one-way data binding
• Began in 2010
• Example sites: AirBnB, Foursquare, Trello
• Tutorials: 1, 2, 3

Backbone.js

See the Pen Hello Backbone.js by Christian Fleschhut (@cfleschhut) on CodePen.

React

• Official site
• "V" in MVP, one-way data binding
• Introduces JSX
• Cleverly uses virtual DOM diffing
• Began in 2013 (Facebook)
• Examples: imgur, Netflix, AirBnB
• Tutorials: 1, 2, 3, 4

React

See the Pen React To-Do List JSX by Mark Funk (@mfunkie) on CodePen.

So which one to choose?

• GitHub gist
• Another comparison
• Another comparison
• Video
• You should try all before rolling any to production
• Check their popularity with libscore

Polymer

• Official site
• Serves to DRY
• See the list of available components

<!-- ... = //cdn.rawgit.com/download/polymer-cdn/1.1.4/lib -->
<!-- Polyfill Web Components support for older browsers -->
<script src=".../webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Import element -->
<link rel="import" href=".../google-map/google-map.html">
<!-- Use element -->
<google-map latitude="55.930194" longitude="37.517952"></google-map>
		

Polymer

Next steps

• Read this good article
• Pick the framework you like
• Pass the corresponding tutorials, read books
• Try to use it in your project
• Continue to Media & design