Building Modern Web Applications - InterSystems · 5 | © InterSystems Corporation. All rights...

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.