Joseph Mertz, Ph.D Teaching Professor H. John III Heinz College Dietrich College IS Program
Mobile Desktop Tablet Social Interac6ve Real Time Big data Share func6onality (e.g. maps) Interact with the physical world (e.g. body, house) Joe Mertz - Distributed ApplicaDon Development 2
ApplicaDons have evolved from single- computer to distributed E.g. History of what has become Customer RelaDonship Management (CRM) systems. Joe Mertz - Distributed ApplicaDon Development 3
Stand alone applicadons on a single computer. Single programming language Single compudng planorm Ad- hoc informadon storage No networking protocols Joe Mertz - Distributed ApplicaDon Development 4
Shared databases available via a LAN to all salespeople Single programming language Single compudng planorm Single DBMS LAN based networking Joe Mertz - Distributed ApplicaDon Development 5
CRM uses common web protocols for users to access customer informadon via a browser MulDple programming languages Middleware (souware on the server) Java and JEE, C# and.net, PHP, Ruby, or others HTML, Javascript, CSS MulDple compudng planorms Server User web browser PotenDally muldple web browsers with varying capabilides Server- side DBMS Web- based networking protocols: hzp Joe Mertz - Distributed ApplicaDon Development 6
Customer portal into your business MulDple languages Middleware (JEE,.NET, etc) Languages of legacy systems HTML, CSS, Javascript Frameworks: AJAX, JQuery, Struts, Springs, Hibernate, JPA, Flash, Silverlight MulDple compudng planorms Server, legacy systems, muldple web browsers Cloud- based planorms (IaaS, PaaS, SaaS) MulDple DBMS, some legacy Networking HTTP, web services protocols (e.g. SOAP, REST), enterprise- internal protocols to De to legacy systems. Joe Mertz - Distributed ApplicaDon Development 7
Customer can access all their account informadon for interacdng with the business via a mobile phone browser MulDple languages Middleware Languages of legacy systems HTML, CSS, Javascript Frameworks: AJAX, JQuery, Struts, Springs, Hibernate, JPA, Flash, Silverlight MulDple compudng planorms Server, legacy systems, muldple web browsers Cloud- based planorms (IaaS, PaaS, SaaS) Mobile phone planorms / browsers MulDple DBMS, some legacy Networking HTTP, web services protocols (e.g. SOAP, REST), enterprise- internal protocols to De to legacy systems, XML or JSON to pass objects to/from mobile. Joe Mertz - Distributed ApplicaDon Development 8
Customer can access all their account informadon for interacdng with the business via a mobile phone E.g. Checking Amazon account shipments on my iphone MulDple languages Middleware Languages of legacy systems HTML, CSS, Javascript ObjecDve- C for iphone, Java for Android and Blackberry, C# for Windows Phone 7. Frameworks: AJAX, JQuery, Struts, Springs, Hibernate, JPA, Flash, Silverlight MulDple compudng planorms Server, legacy systems, muldple web browsers Cloud- based planorms (IaaS, PaaS, SaaS) iphone, Android, etc mobile phone planorms. MulDple DBMS, some legacy Networking HTTP, web services protocols (e.g. SOAP, REST), enterprise- internal protocols to De to legacy systems, XML or JSON to pass objects to/from mobile. Joe Mertz - Distributed ApplicaDon Development 9
Early CRMs were: OUen built by one company Custom built or a commercial system Only included data from within that company The web has allowed developers to embed informadon and funcdonality from other sources in their applicadons aka mashup First mashup: HousingMaps.com Joe Mertz - Distributed ApplicaDon Development 10
HousingMaps.com was the first mashup. By Paul Rademacher The Google Maps team was thrilled to see how he and others were hacking (in the good sense) their system and describing it on blogs. Joe Mertz - Distributed ApplicaDon Development 11
Not really They now have a bulk- posdng API HousingMaps was built without the aid of a published API. What is an API? ApplicaDon Programming Interface A set of souware specificadons that enable a programmer to interact with a souware system Joe Mertz - Distributed ApplicaDon Development 12
Non- opdmized opdon: User does query for housing Housingmaps does query to craigslist Housingmaps processes all responses Housingmaps returns page to user. Apparently opdmized opdon: Craigslist provides RSS feeds (i.e. XML formazed response) Housingmaps subscribes to Craigslist RSS feed Periodically checks the RSS feed When updates, retrieves and screen- scrapes and stores the informadon This limits the number of queries HousingMaps needs to do to Craigslist. (Requests are limited by Craigslist). Joe Mertz - Distributed ApplicaDon Development 13
HousingMaps no longer works CraigsList now has mapping capability Uses OpenStreetMap hzp://www.openstreetmap.org Joe Mertz - Distributed ApplicaDon Development 14
ProgrammableWeb mashup tag frequency Unfortunately ProgrammableWeb no longer provides these stats Joe Mertz - Distributed ApplicaDon Development 15
ProgrammableWeb mashup tag frequency Prior year Joe Mertz - Distributed ApplicaDon Development 16
ProgrammableWeb mashup tag frequency 4 years ago Joe Mertz - Distributed ApplicaDon Development 17
ProgrammableWeb mashup tag frequency For all Dme Joe Mertz - Distributed ApplicaDon Development 18
Source: hzp://www.programmableweb.com/api- research Joe Mertz - Distributed ApplicaDon Development 19
Source: hzp://www.programmableweb.com/api- research Joe Mertz - Distributed ApplicaDon Development 20
What does CraigsList look like on a phone? Joe Mertz - Distributed ApplicaDon Development 21
Customizing presentadon to fit the capabilides of any planorm. Design goal: Design to adapt content for your full customer base. Joe Mertz - Distributed ApplicaDon Development 22
Browse to: hzp://dnyurl.com/m2c- draw Uses HTML5 Canvas tag jquery Node.js Socket.io which uses WebSockets (if available) Only 36 lines of HTML 120 lines JavaScript client- side 36 lines JavaScript server- side Joe Mertz - Distributed ApplicaDon Development 23
The web has become a "planorm" Where once we programmed only individual computers, now our applicadons span many types of devices connected by the internet using open standards for easy interoperability Joe Mertz - Distributed ApplicaDon Development 24
Shrink your internal development team Lower your data center operadng costs Increase your funcdonality By Moving to a cloud- based, souware- as- a- service CRM soludon (e.g. Salesforce) Joe Mertz - Distributed ApplicaDon Development 25
Advances are coming rapidly: new frameworks new tools new products Anything you learn about a specific language, planorm, protocol, or framework will likely change in the next 5 years and perhaps before you graduate! The goal can t be only JavaScript, or Web Sockets, or accessing Amazon S3 storage using REST. Consequently what can you learn from a class like this? Joe Mertz - Distributed ApplicaDon Development 26
To pracdce using specific technologies to crau soludons To reflect on those technologies I.e. categorize, compare, contrast classes of technologies To reflect on those soludons I.e. base soludons on best- pracdce architectures, souware engineering pracdces, and soludon pazerns and extract new pazerns from viable soludons Joe Mertz - Distributed ApplicaDon Development 27
I'll give you an example of making dough, and we will walk through the process. Then I'll give you an example of using an oven and we will do an exercise in how to use it. I'll assume you can open a can. Then I'll give you a big assignment to make and bake something that involves dough. I might suggest as an idea making a creadve pizza. You might opt for making cinnamon buns instead. In any case, I won't walk you through making pizza or cinnamon buns. The learning happens in figuring it out. Joe Mertz - Distributed ApplicaDon Development 28
Joe Mertz - Distributed ApplicaDon Development 29
Developing interacdve web applicadons Improving client- side programming skills Developing server- side middleware Using public 3 rd party APIs AdapDng to mobile devices While we work to understand deeper: networking storing persistent data nosql MVC security Joe Mertz - Distributed ApplicaDon Development 30
JavaScript jquery jquery Mobile Node.js Express and other frameworks within Node.js MongoDB Web Sockets Socket.io MulDple cloud- based services Joe Mertz - Distributed ApplicaDon Development 31
My background Your background - before Thursday's class: Fill out the brief form at hzp://dnyurl.com/m2c- prior Joe Mertz - Distributed ApplicaDon Development 32
Web site hzp://www.andrew.cmu.edu/course/67-328/ Contact info Syllabus Schedule Resources Blackboard Grade book Submitng assignments Piazza Forum for discussion of classes, labs, and assignments Joe Mertz - Distributed ApplicaDon Development 33
Use video, blogs, tutorials, and readings to get the bulk of content. Allows you to read/watch at your own pace Use class Dme for discussion, answering quesdons reviewing demos / examples working on exemplar small projects getng and sharing lots of help Joe Mertz - Distributed ApplicaDon Development 34
Install Google Chrome on your laptop if you don't already have it Read about the Chrome developer tools (links are on the course schedule) Set Up Chrome DevTools NavigaDng the Console Diagnose and Log to Console Inspect and Tweak Your Pages: the Basics Keyboard & UI Shortcuts Reference How to Add or Remove Breakpoints How to Step Through the Code Watch the Douglas Crockford video (1:49:55 long) hzp://yuiblog.com/blog/2007/01/24/video- crockford- tjpl/ AlternaDve: scan his slides to refresh your knowledge, watch when you have quesdons AlternaDve: scan the JavaScript: DefiniDve Ch 1-9 Come ready to write short JavaScript programs in the Chrome developer console. Fill out the brief form at hzp://dnyurl.com/m2c- prior Joe Mertz - Distributed ApplicaDon Development 35