WEB & MOBILE CLOUD APP

With Bootstrap, Backbone, Pusher, AWS, Slim

Gabriele Mittica – www.gabrielemittica.com - @gabrielemittica

- Cloud Development- Semantic Search Engine- Web Consulting- Cloud Conference 2013

- http://www.corley.it- http://corsi.corley.it- @corleycloud- http://

www.slideshare.net/corleycloud

Cloud ComputingCloud computing refers to the delivery of computing and storage capacity as a service to a heterogeneous community of end-recipients.Cloud computing entrusts services with a user's data, software and computation over a network.It has considerable overlap with software as a service (SaaS).• Amazon Web Services• Windows Azure• EMC2• Google Cloud• Rackspace• Joyent

F.A.Q.Is the cloud just a fad?No. It’s a rational evolution of IT architecture towards a more efficient way of managing resources and designing Web apps efficiently.

Is the cloud cheap?No. The cloud allows you to pay the right for each service involved.

Is the cloud just a scalable vps?No. The cloud is a set of services designed to meet specific computing needs.

…as a ServiceSaaSSoftware as a service is a software delivery model in which software and associated data are centrally hosted on the cloud. IaaSIn the most basic cloud-service model, providers of Ifrastructure as a Service offer computers - physical or (more often) virtual machines - and other resources. PaaSIn the Platform as a Service model, cloud providers deliver a computing platform typically including operating system, programming language execution environment, db, and web server.DaaSData as a Service brings the notion that data quality can happen in a centralized place

Cost Saving - Flight

Case Study - PinterestLaunched in March 2010• 2 founders• 1 engineer• Rackspace• 1 small web engine• 1 small MySQL DB

October 2012• Amazon EC2 + S3 + Edge Cast,Akamai…• 180 Web Engines + 240 API Engines• 88 MySQL DBs (cc2.8xlarge) + 1 slave

each• 110 Redis Instances• 200 Memcache Instances• 4 Redis Task Manager + 80 Task

Processors0 monthly pageviews 10 Billions monthly

pageviews

Goals

•Responsive•Scalable•Easy to Manage•High Performance•Multi Device

APP

WHICH TECHNOLOGIES?

HTML APPTwitter BootstrapSleek, intuitive, and powerful front-end framework for faster and easier web development.• 12-column grid• Responsive design• jQuery + LESS CSS• Easy to Userhttp://twitter.github.io/bootstrap/

Backbone JSBackbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API• Models, Views, Collections• Router, History & Events• Useful to create JS APP• http://backbonejs.org/

Corso di Cloud Computing per Applicazioni Web - Corley s.r.l. - http://corsi.corley.it

Corso di Cloud Computing per Applicazioni Web - Corley s.r.l. - http://corsi.corley.it

AWS Simple Storage Server – S3Amazon S3 is storage for the Internet. It is designed to make web-scale computing easier for developers.Amazon S3 provides a simple web services interface that can be used to store and retrieve any amount of data, at any time, from anywhere on the web.http://aws.amazon.com/s3/

• 99,999999999% durability• Files from 1 byte to 5

terabytes• REST & SOAP interfaces• Policies support• Website support• Very easy to use with SDK and

Amazone Console• Cost affordable

AWS CloudsearchAmazon CloudSearch is a fully-managed search service in the AWS Cloud that allows customers to easily integrate fast and highly scalable search functionality into their applications. Amazon CloudSearch seamlessly scales as the amount of searchable data increaseshttp://aws.amazon.com/cloudsearch/

• Small, large and xlarge instances

• $ 0.015 /h up to $0.63 /h• autoscaling• Up to 8-10 millions of entries• Xml and json support• Editable domains

Pusher.comPusher is a hosted API for quickly, easilyand securely adding scalable realtime functionality to web and mobile apps.The Pusher Realtime Cloud has been designed from the ground up to scale seamlessly to meet demand. Coupled with this is a clustered, fully redundant architecture hosted within Amazon EC2.http://pusher.com

var channel = pusher.subscribe('my-channel');channel.bind('my-event', function(data) { alert('Received my-event with message: ' + data.message);});

www.mysite.com (server)

Database

Mobile users?

www.mysite.com (s3)

app.mysite.com (slim)

Database (cloudsearch)

Pusher Js

http://www.mysite.tld

http://www.mysite.tld/#/search/cloud

Mobile view

Responsive CSSThanks to Bootstrap

Results

Service based Multi Device Easy to Manage

Ready to Scale

1 day – 10$

THANK YOUhttp://www.corley.it@gabrielemittica