Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights...
Transcript of Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights...
![Page 1: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/1.jpg)
Building Modern Web ApplicationsStefan Wittmann
Product Manager
![Page 2: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/2.jpg)
2 | © InterSystems Corporation. All rights reserved. |
![Page 3: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/3.jpg)
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
![Page 4: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/4.jpg)
4 | © InterSystems Corporation. All rights reserved. |
![Page 5: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/5.jpg)
5 | © InterSystems Corporation. All rights reserved. |
Back in the old days…
Server Pages
![Page 6: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/6.jpg)
6 | © InterSystems Corporation. All rights reserved. |
![Page 7: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/7.jpg)
7 | © InterSystems Corporation. All rights reserved. |
M. V. C.Model View Controller
![Page 8: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/8.jpg)
8 | © InterSystems Corporation. All rights reserved. |
MVC
Model
Data storage
ControllerUpdate model
based on user
input.
Update view
when model
changes.
View
User interface
![Page 9: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/9.jpg)
9 | © InterSystems Corporation. All rights reserved. |
![Page 10: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/10.jpg)
10 | © InterSystems Corporation. All rights reserved. |
Application schematic
View
(HTML)
Controller
(JS)
Controller
(COS)
Model
R
E
S
T
A
P
I
Client Server
![Page 11: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/11.jpg)
11 | © InterSystems Corporation. All rights reserved. |
![Page 12: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/12.jpg)
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
![Page 13: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/13.jpg)
13 | © InterSystems Corporation. All rights reserved. |
![Page 14: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/14.jpg)
14 | © InterSystems Corporation. All rights reserved. |
JSON
{
"id": 1,
"name": "Michael",
"city": "Boston",
"company": "InterSystems"
}
![Page 15: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/15.jpg)
15 | © InterSystems Corporation. All rights reserved. |
Dynamic Objects — Object to JSON
{
"id": 1,
"name": "Michael",
"city": "Boston",
"company": "InterSystems"
}
Write obj.%ToJSON()
Set obj =
![Page 16: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/16.jpg)
16 | © InterSystems Corporation. All rights reserved. |
Dynamic Objects — JSON to Object
##class(%DynamicObject).%FromJSON(jsonStream)
![Page 17: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/17.jpg)
17 | © InterSystems Corporation. All rights reserved. | “AngularJS logo” is licensed under CC BY-SA 3.0
![Page 18: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/18.jpg)
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
![Page 19: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/19.jpg)
19 | © InterSystems Corporation. All rights reserved. |
![Page 20: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/20.jpg)
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
![Page 21: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/21.jpg)
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
![Page 22: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/22.jpg)
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”
![Page 23: Building Modern Web Applications - InterSystems€¦ · 5 | © InterSystems Corporation. All rights reserved. | Back in the old days… Server Pages](https://reader033.fdocuments.us/reader033/viewer/2022060406/5f0f602d7e708231d443d9b7/html5/thumbnails/23.jpg)
Thank you.