backend-development.github.io/slides_architectures.html at master · backend-development/backend-development.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Slides for
        Architectures — Ruby on Rails Guides
    </title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" data-turbo-track="reload">
    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
    <link rel="stylesheet" type="text/css" href="stylesheets/highlight.css" data-turbo-track="reload">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" href="stylesheets/reset.css">
		<link rel="stylesheet" href="stylesheets/reveal.css">
		<link rel="stylesheet" href="stylesheets/myslide.css" id="theme">
    <link rel="stylesheet" href="stylesheets/code.css">
    <script src="javascripts/clipboard.js" data-turbo-track="reload"></script>
    <script src="javascripts/slides.js" data-turbo-track="reload"></script>

</head>

<body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
            <h1>Architectures</h1><p>With the proliferation of frontend frameworks
you get to choose between many possible architectures
for your web app.</p><p>After working through this guide you should</p>
<ul>
<li>have an overview of possible architecures</li>
<li>be able to chose an architectures</li>
</ul>

          <p><small>Slides - use arrow keys to navigate, esc to return to page view, f for fullscreen</small></p>

        </section>
        <section><a class='slide_break' href='architectures.html#slide-0'>▻</a>
<h2 id="examples"><a class="anchorlink" href="#examples"><span>1</span> Examples</a></h2><p>Here are some possible architectures.  In all of these
scenarios Ruby on Rails  can be replaced by another web frameworks -
be it Laravel in PHP or something based on node.js or....</p>
<ul>
<li>Rails app is backend only, javascript is used sparingly, for "decoration" purposes only.</li>
<li>One Rails "backend page" is the host to several "frontend pages"

<ul>
<li>the data is sent to the frontend

<ul>
<li>when the html is first generated, e.g. through data attributes</li>
<li>through separate ajax requests.  the html can be cached for all users, personalization only occurse through the ajax data</li>
</ul></li>
<li>every frontend page can also be rendered on the backend if needed (e.g. react)</li>
</ul></li>
<li>The frontend app is  a "one page app", rails supplies the REST API that contains the business logic and anything
there are also many options withouth rails:</li>
<li>the frontend app is a "one page app", the backend is mostly stupid (firebase, couchdb) except for authenticaiton and permissions</li>
<li>frontend and backend are generated by the same frameworks, e.g. meteor</li>
</ul>
</div></section>
      </div>
    </div>
    <!-- End slides. -->
    <!-- Required JS files. -->
		<script src="javascripts/reveal.js"></script>
		<script src="javascripts/search.js"></script>
		<script src="javascripts/markdown.js"></script>

    <script>
    // Also available as an ES module, see:
    // https://revealjs.com/initialization/
    Reveal.initialize({
      controls: false,
      progress: true,
      center: false,
      hash: true,

      // The "normal" size of the presentation, aspect ratio will
      // be preserved when the presentation is scaled to fit different
      // resolutions. Can be specified using percentage units.
      width: 1000,
      height: 600,
      disableLayout: false,

      // Factor of the display size that should remain empty around
      // the content
      margin: 0.05,

      // Bounds for smallest/largest possible scale to apply to content
      minScale: 0.2,
      maxScale: 10.0,

      keyboard: {
        27: () => {
          // do something custom when ESC is pressed
          var new_url = window.location.pathname.replace('slides_', '') + window.location.hash.replace('/','slide-');
          window.location = new_url;
        },
        191: 'toggleHelp',
        13: 'next', // go to the next slide when the ENTER key is pressed
      },

      // Learn about plugins: https://revealjs.com/plugins/
      plugins: [ RevealSearch, RevealMarkdown ]
    });
    </script>
</body>

</html>