picking a technology stack

8/9/2019 Picking a Technology Stack

1/38

Picking a

Technology Stack

tinyurl.com/pickyourstack


2/38

Keep in mind...Your app:

● Who is your target audience?● Will you have both a mobile and web presence?● What browsers do you want to support?

Your team:

● How many codebases do you want to have?● What languages/technologies do you know/want to learn?


3/38

Frontend vs. Backend


4/38

Frontend


5/38

Frontend: Web Apps


6/38

Why use libraries?● DOM● Events● AJAX● Effects & Animation● HTML Templating● Page Layout● Widgets/Theming● Graphics/Charts● Data Modeling● Routing

● ARIA Compliance● Multi-Browser Support● Mobile Support


7/38

DOM

var form = document.getElementById('guestbook');

var textArea = form.getElementsByTagName('textarea')[0];

var comment = textArea.value;textArea.style.border = '1px solid red';

var comment = $('#form textarea').val();

comment.css({'border': '1px solid red'});

No library:

jQuery:


8/38

Eventsvar form = document.getElementById('guestbook');

try {

form.addEventListener("submit", onSubmit);} catch(e) {

form.attachEvent("submit", onSubmit);

}

$('#guestbook').on('submit', onSubmit);

No library:

jQuery:


9/38

AJAXvar status = -1;

if (typeof ActiveXObject != 'undefined') {

var request = new ActiveXObject('Microsoft.XMLHTTP');

} else if (window["XMLHttpRequest"]) {

var request = new XMLHttpRequest();

}

request.onreadystatechange = function() { if (request.readyState == 4) {

try {

status = request.status;

} catch (e) {}

if (status == 200) {

onDataReceived(request.responseText, request.status);

request.onreadystatechange = function() {};

}

}

}

request.open('GET', '/guestbook/entries/', true);

try {

request.send(null); } catch (e) {}

};

$.ajax({url: '/guestbook/entries/', success: onDataReceived});

No library:

jQuery:


10/38

Effects & Animationvar element = document.getElementById("error");

var duration = 3000;

var hidtime = 2000;

var showtime = 2000;

function setOpacity(percentage) {

element.style.opacity = percentage;

element.style.MozOpacity = percentage;

element.style.KhtmlOpacity = percentage;

element.style.filter = 'alpha(opacity=' + (percentage * 100) + ');';

}

function fadeIn() {

for (i = 0; i


11/38

HTML Templatingvar ul = document.createElement('ul');

for (var i = 0; i < entries.length; i++) {

var entry = entries[i];

var li = document.createElement('li');

li.innerHTML = entry.name + ' wrote: ' + entry.comment + '
' + entry.date +

' ';

ul.appendChild(div);

}

{{#each entries}}

{{name}} wrote: {{comment}}
{{date}}

{{/each}}

No library:

Handlebars:

var template = Handlebars.compile($("#guestbook-template").html());var html = template({entries: entries});


12/38

Page LayoutYUI Grids Builder :

Tabs, Multi-Column, Grids, etc.

http://developer.yahoo.com/yui/grids/builder/http://developer.yahoo.com/yui/grids/builder/


13/38

WidgetsForms

Data Grids

Menus

Carousel, Lightbox, Dialog,Tooltip, Accordion, Paginator,etc..

Screenshots from Dojo

http://dojocampus.org/explorer/


14/38

Theming jQuery UI Theme Roller:

http://jqueryui.com/themeroller/


15/38

Graphics/ChartsgRaphael:RaphaelJS:

http://raphaeljs.com/http://g.raphaeljs.com/


16/38

Frameworks & Libraries


17/38

W eb Frameworks...that do it "all."

● jQuery UI● YUI

● Dojo● Sencha● QooxDoo● Closure● SproutCore● MooTools

Roundup, Comparison

http://mootools.net/http://guides.sproutcore.com/http://mootools.net/http://guides.sproutcore.com/http://qooxdoo.org/http://www.sencha.com/products/extjs/examples/http://dojotoolkit.org/http://jqueryui.com/http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworkshttp://www.developerdrive.com/2011/09/13-javascript-frameworks-that-can-make-you-a-better-web-developer/http://mootools.net/http://guides.sproutcore.com/https://developers.google.com/closure/library/http://qooxdoo.org/http://www.sencha.com/products/extjs/examples/http://dojotoolkit.org/http://yuilibrary.com/http://jqueryui.com/


18/38

CSS Frameworks● Twitter Bootstrap● ZURB Foundation

● BlueTrip● Blueprint CSS● YUI Grids● Skeleton● 960 grids

http://960.gs/http://960.gs/http://developer.yahoo.com/yui/grids/http://www.blueprintcss.org/http://bluetrip.org/http://twitter.github.com/bootstrap/http://960.gs/http://www.getskeleton.com/http://developer.yahoo.com/yui/grids/http://www.blueprintcss.org/http://bluetrip.org/http://foundation.zurb.com/http://twitter.github.com/bootstrap/


19/38

JS Li braries: BrowserDOM, Events, AJAX, General Utility

● jQuer y● Prototype● SnackJS

● $dom● QuoJS

http://quojs.tapquo.com/http://julienw.github.com/dollardom/http://snackjs.com/http://jquery.com/http://quojs.tapquo.com/http://julienw.github.com/dollardom/http://snackjs.com/http://www.prototypejs.org/http://jquery.com/


20/38

JS Libraries: ArchitectureData Retrieval & Modeling, Routing, Object-Orientation

● Backbone

● EmberJS● SammyJS● JavaScriptMVC

http://javascriptmvc.com/http://sammyjs.org/http://javascriptmvc.com/http://sammyjs.org/http://emberjs.com/http://documentcloud.github.com/backbone/


21/38

JS Libraries: Micro-Libs● DOM: tinyDOM● Events: Events.js● AJAX: MicroAjax● Animation: Morpheus, Viper ● Data Modeling: Spine, Knockout● Templates: Handlebars, Mustache● Routing: PathJS

● Object-Orientation: Classy, Klass● Graphics, Widgets, Charts,

Date/time, Drag/Drop,Internationalization

...many more at microjs.com or justGoo le what ou need.

http://www.microjs.com/http://classy.pocoo.org/https://github.com/ded/klasshttps://github.com/ded/klasshttps://github.com/ded/klasshttps://github.com/mtrpcic/pathjshttp://spinejs.com/http://knockoutjs.com/http://knockoutjs.com/https://github.com/ded/morpheushttps://github.com/ded/morpheushttp://code.google.com/p/microajax/https://github.com/ctult/TinyDOMhttp://www.microjs.com/https://github.com/ded/klasshttp://classy.pocoo.org/https://github.com/mtrpcic/pathjshttps://github.com/janl/mustache.jshttp://handlebarsjs.com/http://knockoutjs.com/http://spinejs.com/https://github.com/alpha123/Viperhttps://github.com/ded/morpheushttp://code.google.com/p/microajax/https://github.com/kbjr/Events.jshttps://github.com/ctult/TinyDOM


22/38

Frontend: Mobile AppsNative


23/38

Frontend: Mobile AppsCross-Compiled


24/38

Frontend: Mobile AppsHybrid


25/38

Frontend: Mobile AppsHybrid

function capturePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess); }

function onPhotoDataSuccess(imageData) {

var smallImage = document.getElementById('smallImage');

smallImage.src = "data:image/jpeg;base64," + imageData;

}

Capture Photo


26/38

Frontend: Hybrid Apps


27/38

Why use libraries?

● DOM● Events● AJAX● Effects & Animation● HTML Templating● Page Layout● Widgets/Theming● Graphics/Charts● Data Modeling

● Routing

Most of the reasons before...Plus:

● Touch events● Scrolling● Mobile-optimized UI

But:

Library size is more important.


28/38

(Mobile Optimized)

Web Frameworks jQueryMobile

Also: Jo, WinkUI, DHTMLxTouch, DojoMobile, Lungo

Sencha Kendo UI

http://www.kendoui.com/http://www.sencha.com/http://www.lungojs.com/http://dojotoolkit.org/features/mobile.phphttp://www.dhtmlx.com/touch/http://www.winktoolkit.org/http://joapp.com/http://jquerymobile.com/


29/38

(Mobile Optimized)

CSS FrameworksZURB

See Also: Responsive Frameworks Roundup

Bootstrap iUI

http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/http://www.iui-js.org/http://twitter.github.com/bootstraphttp://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/http://foundation.zurb.com/


30/38

(Mobile Optimized)

JS LibrariesBrowser:● Zepto

Micro-librar ies:● DOM: XUI● Touch Events: jQTouch● Scrolling: iScroll

● Games: Impact● ...and more at microjs.com

http://microjs.com/#mobilehttp://impactjs.com/http://cubiq.org/iscroll-4http://xuijs.com/http://microjs.com/#mobilehttp://impactjs.com/http://cubiq.org/iscroll-4http://jqtouch.com/http://xuijs.com/http://zeptojs.com/


31/38

Frontend: Recap


32/38

What if you want to do

both web and mobile?Web Frameworks:● Dojo + Dijit + Dojo Mobile

● jQuery + jQueryUI + jQueryMobile● Sencha + ExtJS

CSS Frameworks:● Bootstrap● ZURB

JS Libraries:● jQuery + Zepto


33/38

Backend


34/38

Backend: Code"Server-side Languages"

● PHP● ASP.Net● Ruby● Perl● Python● ColdFusion● Java● JavaScript


35/38

Backend: DatabaseRelational

● MySQL

● PostGreSQL

Non-Relational ("NoSQL")● MongoDB● Redis● BigTable


36/38

Backend: ServerShared hosting:GoDaddy, MediaTemple, DreamHost

Virtual Private Server:Linode, RackSpace, Amazon EC2

Cloud Hosting (PaaS):

Windows Azure, Google AppEngine, Heroku, DotCloud, AppFog

http://appfog.com/http://www.microsoft.com/windowsazure/http://code.google.com/appenginehttp://appfog.com/https://www.dotcloud.com/http://www.heroku.com/http://code.google.com/appenginehttp://www.microsoft.com/windowsazure/http://aws.amazon.com/ec2/http://www.rackspacecloud.com/http://www.linode.com/http://dreamhost.com/http://mediatemple.com/http://godaddy.com/


37/38

Backend-less Frontend


38/38

Keep in mind...Your app:

● Who is your target audience?● Will you have both a mobile and web presence?● What browsers do you want to support?

Your team:

● How many codebases do you want to have?● What languages/technologies do you know/want to learn?

picking a technology stack

Documents