Emil Náhlik, Martin Kočan - openslava.sk · Media Partner Organizers Top Media Partner Supporters General Partner Emil Náhlik, Martin Kočan Accenture Embedded Web Applications

Media Partner

Organizers

Top Media Partner

General Partner

Supporters

Emil Náhlik, Martin Kočan Accenture

Embedded Web Applications October 17, 2014

About us

Emil Náhlik Martin Kočan

Ask questions or rate the Speaker

www.sli.do/openslava

Agenda

• Introduction

• Embedded Web Application Architecture

• Packaged Software with Embedded Web Application

• Salesforce.com Demo

Agenda

• Introduction




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

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 (EWA)

Client Browser


Cookies


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


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




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



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

@




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




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

?




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




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

?



Resource utilization comparison

Data

?

Client CPU

Bandwidth

Server CPU

HTML / JSON

Client CPU

Bandwidth

Server CPU

Standard Web Application Embedded Web Application

Agenda

• Introduction




Packaged Software - SAP, Siebel, Salesforce.com

Packaged Software with EWA

Client Browser


New View Edit Delete List Search


View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)

Packaged Software MVC - Model


Client Browser




View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)


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


Client Browser




View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)


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


Client Browser




View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)


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


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


Client Browser



View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)


Model

Controller

View

REST

REST

Embedded Web Application MVC - Model


Client Browser



View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)


Model

Controller

View

REST

REST


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


Client Browser



View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)


Model

Controller

View

REST

REST


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


Client Browser



View

Controller

Model

HTTP

HTTP

Cached Code

Cached Code

Template (HTML, JS,

CSS, …)


Model

Controller

View

REST

REST


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




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)

Salesforce.com Demo

Use Case – Search Accounts with out-of-the-box features

Salesforce.com Demo

Use Case – Search Accounts in Embedded Web App

Salesforce.com Demo

Use Case – Hierarchy Reorganization with out-of-the-box features

Salesforce.com Demo

Use Case – Hierarchy Reorganization in Embedded Web App

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…

Documents

Emil Náhlik, Martin Kočan - openslava.sk · Media Partner Organizers Top Media Partner Supporters General Partner Emil Náhlik, Martin Kočan Accenture Embedded Web Applications