Das Frontend ist ja dann trivial - Microservices und Web-Frontends. Matthias Reuter & Michael Bruns Darmstadt,

Size: px

Start display at page:

Download "Das Frontend ist ja dann trivial - Microservices und Web-Frontends. Matthias Reuter & Michael Bruns Darmstadt,"

Monica Nicholson
6 years ago
Views:

1 Das Frontend ist ja dann trivial - Microservices und Web-Frontends Matthias Reuter & Michael Bruns Darmstadt,

2 Matthias Reuter inovex GmbH Frontend developer I build stuff for the Internet Michael Bruns inovex GmbH Software developer and architect Built quite a bit of waipu.tv 2

3 Microservices?!... EPG Registration Auth Playout Recording... Third Party Users Streaming... 3

4 Why Microservices? Abstract problem split into small solutions Monolith would simply be too hard to handle Large portions of the application don t need to know about the rest of the application Load peaks on small parts of the application are expected 4

5 Why Microservices? Independent deployment Different people with different backgrounds and skills Polyglott development Most important: We, i.e. the whole team, wanted to do it! 5

6 That s it. Microservices are great. You can go home now, the frontend is easy. Or isn t it?! 6

7 Every Service has its own Frontend 7

8 Every Service has its own Frontend NPM package for common code web-commons css/ js/ assets/ fonts/ images/ templates/ web-commons Self-care Registration CDN Auth 8

9 Every Service has its own Frontend Add NPM package to dependencies via git tag "dependencies": { "web-commons": "git+ssh://git@git.example.net/ bs/web-commons.git#v1.7.3" } 9

10 Every Service has its own Frontend Scalability Independent deployment Code duplication Bad for caching Pages with content from several services Generalists vs. specialists 10

11 Single Page Application! 11

12 Single Page Application REST API Self-care Registration Auth 12

13 Single Page Application API changes - Backend solution Backend supports old and new API in parallel for a while Via Path: Via Header: Accept: application/vnd.waipu.auth-v3+json 13

14 Single Page Application API changes - Frontend solution login().then(function (res) { username = res.username; }); 14

15 Single Page Application API changes - Frontend solution login().then(function (res) { username = res.user.name; }); 15

16 Single Page Application API changes - Frontend solution login().then(function (res) { return res.user? res : { user: { name: res.username } }; }).then(function (res) { username = res.user.name; }); 16

17 Single Page Application Scalability Code duplication Good for caching Pages with content from several services Generalists vs. specialists Independent Deployment Initial page load time Dependency on JS Sequence of requests 17

18 Single Page Application Sequence of requests Auth Subscription Recording EPG 18

19 Backend for Frontend Sequence of requests BFF Auth Subscription Recording EPG 19

20 Backend for Frontend Reusable concept BFF BFF Auth Subscription Recording EPG 20

21 Backend for Frontend Scalability All the benefits of an SPA Sequence of requests Server-side rendering! Initial page load time Dependency on JS Independent Deployment API changes 21

22 Server-side Includes User Subscription Recording 22

23 Server-side Includes Example: nginx http { server { location / { root /some/path; ssi on; } } } 23

24 Server-side Includes Example: nginx <html> <body>  </body> </html> user-agent.html: <p>hey, you've got a nice user agent:</p> <p></p> 24

25 Server-side Includes Scalability Independent deployment Code duplication Good for caching Pages with content from several services Generalists vs. specialists Backend logic needed to assemble page Bundled CSS/JS Global Styles/Scripts 25

26 Web-Components Custom Elements <waipu-rec-self-care user-id= /> HTML-Imports <link rel= import href= /> Shadow-DOM DOM hidden from outside Styles kept inside 26

27 Web-Components Recording Subscription User 27

28 Web-Components Scalability Independent deployment Good for caching Pages with content from several services Generalists vs. specialists Bundled CSS/JS Code duplication Depends on JavaScript 28

29 And now for something completely different... 29

30 Monorepo One to rule them all web-commons Self-care Registration Auth Scalability Independent deployment No code duplication No integration overhead Easy code sharing Version management Code once, break everywhere... 30

31 Testability End-to-end Tests Every Service has its own Frontend Single Page Application Backend for Frontend Server-side Includes Web-Components Monorepo 31

32 One final note... Both lines have the same length? Don t believe anything just because it s written on a slide! 32

Vielen Dank Matthias Reuter @gweax Michael Bruns

33 Vielen Dank Matthias Michael inovex GmbH Ludwig-Erhard-Allee Karlsruhe

To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservices on CloudFoundry. Tony Erwin,

To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservices on CloudFoundry Tony Erwin, aerwin@us.ibm.com Agenda Origins of the Bluemix UI Demons of the Monolith Slaying Demons with