23
Building Modern Web Applications Stefan Wittmann Product Manager
Building Modern Web ApplicationsStefan Wittmann
Product Manager
2 | © InterSystems Corporation. All rights reserved. |
3 | © InterSystems Corporation. All rights reserved. |
Overview
Concepts of Modern Web Application Design
Live Demo• Creating a REST API
• Connecting the API to an Angular application
Additional Information• CORS
• Securing your REST API
Q&A
4 | © InterSystems Corporation. All rights reserved. |
5 | © InterSystems Corporation. All rights reserved. |
Back in the old days…
Server Pages
6 | © InterSystems Corporation. All rights reserved. |
7 | © InterSystems Corporation. All rights reserved. |
M. V. C.Model View Controller
8 | © InterSystems Corporation. All rights reserved. |
MVC
Model
Data storage
ControllerUpdate model
based on user
input.
Update view
when model
changes.
View
User interface
9 | © InterSystems Corporation. All rights reserved. |
10 | © InterSystems Corporation. All rights reserved. |
Application schematic
View
(HTML)
Controller
(JS)
Controller
(COS)
Model
R
E
S
T
A
P
I
Client Server
11 | © InterSystems Corporation. All rights reserved. |
12 | © InterSystems Corporation. All rights reserved. |
REST
HTTP Method Action
POST Create
GET Read
PUT Update
DELETE Delete
GET http://localhost:57772/gs/api/tasks
Server and Port
Resource
13 | © InterSystems Corporation. All rights reserved. |
14 | © InterSystems Corporation. All rights reserved. |
JSON
{
"id": 1,
"name": "Michael",
"city": "Boston",
"company": "InterSystems"
}
15 | © InterSystems Corporation. All rights reserved. |
Dynamic Objects — Object to JSON
{
"id": 1,
"name": "Michael",
"city": "Boston",
"company": "InterSystems"
}
Write obj.%ToJSON()
Set obj =
16 | © InterSystems Corporation. All rights reserved. |
Dynamic Objects — JSON to Object
##class(%DynamicObject).%FromJSON(jsonStream)
17 | © InterSystems Corporation. All rights reserved. | “AngularJS logo” is licensed under CC BY-SA 3.0
18 | © InterSystems Corporation. All rights reserved. |
Separation of concerns — Client vs. Server
View
(HTML)
Controller
(JS)
Controller
(COS)
Model
R
E
S
T
A
P
I
Client Server
19 | © InterSystems Corporation. All rights reserved. |
20 | © InterSystems Corporation. All rights reserved. |
To-do List Application
Users must have the ability to:
• Review a list of their tasks
• Mark a task as completed
• Create new tasks
• Edit an existing task
― Specify whether a task is more important than others
• Delete unnecessary tasks
21 | © InterSystems Corporation. All rights reserved. |
Where to go from here…
While you are here:
• Contact Stefan Wittmann
Learn how to use the technology showcased in this session by visiting:
• https://learning.intersystems.com/ (Online Learning)
• https://learning.intersystems.com/course/view.php?id=622 (Setting Up REST Services)
• https://community.intersystems.com/
Contact your Sales Engineer for additional post conference engagements
Code is available here:https://github.com/intersystems/building-modern-web-apps
Session recording and slides are available at: Learning.InterSystems.com Search for “Global Summit 2017”
Thank you.
