Post on 15-May-2020
transcript
Media Partner
Organizers
Top Media Partner
General Partner
Supporters
Emil Náhlik, Martin Kočan Accenture
Embedded Web Applications October 17, 2014
Agenda
• Introduction
• Embedded Web Application Architecture
• Packaged Software with Embedded Web Application
• Salesforce.com Demo
Agenda
• Introduction
• Embedded Web Application Architecture
• Packaged Software with Embedded Web Application
• Salesforce.com Demo
Introduction
• Do you know some Packaged Software?
• Why clients use Packaged Software?
• How is Packaged Software adjusted to client needs?
Introduction
• Embedded Web Application is similar to embedded components
• For users it means:
– Same look & feel as the Host Application
– Non-disturbing to Host Application
– No extra login
– User does not perceive any different working with EWA – except better productivity !!!
Agenda
• Introduction
• Embedded Web Application Architecture
• Packaged Software with Embedded Web Application
• Salesforce.com Demo
Embedded Web Application Architecture
Traditional Web Application
Client Browser
Rendered UI (HTML & JS)
Cookies
Application Server Java / PHP / .NET / …
View
Cached Code
Cached Code
Cached resources
Business services
DB Access, Integration
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Embedded Web Application Architecture
Embedded Web Application (EWA)
Client Browser
Rendered UI (HTML & JS)
Cookies
Application Server Java / PHP / .NET / …
View
Cached Code
Cached Code
Cached resources
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Business services
DB Access, Integration
HTTP Embedded Code HTTP
Cached Code
Embedded Application
MVC
REST
REST
Local Storage
REST API
Embedded Web Application Architecture
EWA Initialization and Workflow
FirewallApplication / Web Server
Reverse Proxy
External Database
External System
REST API
1. HTTP GET /app REST API
REST API
HTTP GET
Embedded Web Application Architecture
EWA Initialization and Workflow
FirewallApplication / Web Server
Reverse Proxy
External Database
External System
REST API
1. HTTP GET /app 2. HTTP 200 OK (.html, .js, .css, .png, …)
REST API
REST API
Single page application code
Embedded Web Application Architecture
FirewallApplication / Web Server
Reverse Proxy
External Database
External System
REST API
1. HTTP GET /app 2. HTTP 200 OK (.html, .js, .css, .png, …) 3. JavaScript starts and renders UI
REST API
REST API
@
EWA Initialization and Workflow
Embedded Web Application Architecture
FirewallApplication / Web Server
Reverse Proxy
External Database
External System
REST API
1. HTTP GET /app 2. HTTP 200 OK (.html, .js, .css, .png, …) 3. JavaScript starts and renders UI 4. REST call to app. server
REST API
REST API
?
REST call
EWA Initialization and Workflow
Embedded Web Application Architecture
FirewallApplication / Web Server
Reverse Proxy
External Database
External System
REST API
1. HTTP GET /app 2. HTTP 200 OK (.html, .js, .css, .png, …) 3. JavaScript starts and renders UI 4. REST call to app. server
REST API
REST API
Data
?
EWA Initialization and Workflow
Embedded Web Application Architecture
FirewallApplication / Web Server
Reverse Proxy
External Database
External System
REST API
1. HTTP GET /app 2. HTTP 200 OK (.html, .js, .css, .png, …) 3. JavaScript starts and renders UI 4. REST call to interact with server 5. REST call to external system
REST API
REST API
?
REST call
EWA Initialization and Workflow
Embedded Web Application Architecture
FirewallApplication / Web Server
Reverse Proxy
External Database
External System
REST API
1. HTTP GET /app 2. HTTP 200 OK (.html, .js, .css, .png, …) 3. JavaScript starts and renders UI 4. REST call to interact with server 5. REST call to external system
REST API
REST API
Data
?
EWA Initialization and Workflow
Embedded Web Application Architecture
Resource utilization comparison
Data
?
Client CPU
Bandwidth
Server CPU
HTML / JSON
Client CPU
Bandwidth
Server CPU
Standard Web Application Embedded Web Application
Agenda
• Introduction
• Embedded Web Application Architecture
• Packaged Software with Embedded Web Application
• Salesforce.com Demo
Packaged Software - SAP, Siebel, Salesforce.com
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
New View Edit Delete List Search
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Packaged Software MVC - Model
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
New View Edit Delete List Search
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Packaged Software with EWA
Packaged Software MVC - Model
• Standard Objects – Product, Order, Order Item
– Extendible declaratively by adding attributes, relations
– Out of the Box functionality – Processes, Reports, Approval Rules
• Custom Objects
– Defined declaratively
– Limitations of the platform
Packaged Software MVC - View
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
New View Edit Delete List Search
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Packaged Software with EWA
Packaged Software MVC - View • Generated Page Layouts
• WYSIWYG Design Tools for Page Layouts
• Look & Feel adjusted through CSS
• User interaction based on manipulation of Standard or Custom objects
– New, View, Edit, Delete, List, Search
• JavaScript snippets can improve user interaction
Packaged Software MVC - Controller
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
New View Edit Delete List Search
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Packaged Software with EWA
Packaged Software MVC - Controller • Platform generates Standard Controller for each Object
• Controllers are extended with specific business logic
• Coding in languages such as ABAP, Apex, eScript
Packaged Software with EWA
Example – Generic Ordering
Model
View • Add Order Item
• Edit Order Item
• Search Product
• …
Controller • Order – Create, Read, Update, Delete, Query
• Order Item – Create, Read, Update, Delete, Query
• Product – Create, Read, Update, Delete, Query
Order Order Item Product
Embedded Web Application
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Embedded Application
Model
Controller
View
REST
REST
Embedded Web Application MVC - Model
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Embedded Application
Model
Controller
View
REST
REST
Packaged Software with EWA
Embedded Web Application MVC - Model
• Custom Model not restricted by Packaged Software
• Fits the needs of solved problem
• Example for Ordering:
– Kitchen Furniture Ordering • Help customers to choose furniture which fits their kitchen
• Objects like Kitchen, Wall, Space, Furniture, Palette
Embedded Web Application MVC - View
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Embedded Application
Model
Controller
View
REST
REST
Packaged Software with EWA
Embedded Web Application MVC - View
• Leverage richness of the JavaScript libraries (e.g. AngularJS, Bootstrap, etc.)
– Graph visualization of data
– Animations
– Maps
• Example for Ordering:
– Kitchen Furniture Ordering • Visualization of Kitchen design (drag&drop)
Embedded Web Application MVC - Controller
Packaged Software with EWA
Client Browser
Rendered UI (HTML & JS)
Application Server Java / PHP / .NET / …
View
Controller
Model
HTTP
HTTP
Cached Code
Cached Code
Template (HTML, JS,
CSS, …)
Embedded Application
Model
Controller
View
REST
REST
Packaged Software with EWA
Embedded Web Application MVC - Controller
• Performs actions on Embedded Application Model and generates View
• Synchronizes with Model of Host Application – Loads and translates data from Host Application Model
– Translates and updates any changes to Host Application Model
• Examples from Ordering:
– Load List of Products into a Palette and Furniture
– Update configured Kitchen into List of Order Items
Agenda
• Introduction
• Embedded Web Application Architecture
• Packaged Software with Embedded Web Application
• Salesforce.com Demo
Salesforce.com Demo
• CRM Sales Cloud and Service Cloud applications are built on the Force.com platform. They include application specific MVC.
• Chatter is a social enterprise application
• Database.com is the cloud-based database platform. It includes:
– Security model.
– Integration mechanisms.
CRM Applications
Database.com
Force.com
Chatter
Force.com is a cloud-based platform for building applications.
Salesforce.com Demo
Account Hierarchy Management – a real Embedded Web App
Account Name Parent Account
Stanford University
School of Engineering Stanford University
School of Medicine Stanford University
Neurosurgery School of Medicine
Radiation Oncology School of Medicine
Radiation & Cancer Biology Radiation Oncology
Salesforce.com Model (Records)
Account Hierarchy Model (Tree)
Conclusion
Benefits
• Better user experience
• Responsiveness
• Off-line mode
• Small footprint
• Cost effective
Challenges
• Source code at client side
• Intellectual Property Protection
• API documentation of packaged SW
Sky is the limit, let your creativity fly…
Thank you for your attention! Now is the Q&A time…