mirror of
https://github.com/foomo/foomo-docs.git
synced 2025-10-16 12:35:40 +00:00
19 lines
16 KiB
HTML
19 lines
16 KiB
HTML
<!doctype html>
|
||
<html class="docs-version-current" lang="en" dir="ltr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-beta.14">
|
||
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="foomo project docs RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="foomo project docs Atom Feed">
|
||
<link rel="search" type="application/opensearchdescription+xml" title="foomo project docs" href="/opensearch.xml"><title data-react-helmet="true">Frontend Guide | foomo project docs</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://www.foomo.org/docs/frontend/intro"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Frontend Guide | foomo project docs"><meta data-react-helmet="true" name="description" content="In this section you will find a guide on how to develop frontends with the foomo stack. Please also see the general guide."><meta data-react-helmet="true" property="og:description" content="In this section you will find a guide on how to develop frontends with the foomo stack. Please also see the general guide."><link data-react-helmet="true" rel="icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://www.foomo.org/docs/frontend/intro"><link data-react-helmet="true" rel="alternate" href="https://www.foomo.org/docs/frontend/intro" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://www.foomo.org/docs/frontend/intro" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://4254BPUI1C-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.47738ace.css">
|
||
<link rel="preload" href="/assets/js/runtime~main.0b7c6ff0.js" as="script">
|
||
<link rel="preload" href="/assets/js/main.52cf6153.js" as="script">
|
||
</head>
|
||
<body>
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<div><a href="#" class="skipToContent_OuoZ">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title">foomo</b></a><a class="navbar__item navbar__link" href="/docs/general/intro">General</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/frontend/intro">Frontend</a><a class="navbar__item navbar__link" href="/docs/backend/intro">Backend</a><a class="navbar__item navbar__link" href="/docs/devops/intro">DevOps</a><a class="navbar__item navbar__link" href="/docs/project-management/intro">PM</a><a class="navbar__item navbar__link" href="/docs/projects/intro">Projects</a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/blog">Blog</a><div class="searchBox_Utm0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/docs/frontend/intro">Intro</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/css">CSS</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/rtfm">RTFM</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/setup">Setup</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/stack">Stack</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/performance">Performance</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_TwRn" href="/docs/frontend/typescript/objects">TypeScript</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/frontend/typescript/objects">Objects</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/frontend/typescript/spreading">Spreading</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/debugging_js">Debugging in JavaScript</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/pitfalls">Pittfals</a></li></ul></nav></div></aside><main class="docMainContainer_r8cw"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_zHA2"><div class="docItemContainer_oiyr"><article><div class="tocCollapsible_aw-L theme-doc-toc-mobile tocMobile_Tx6Y"><button type="button" class="clean-btn tocCollapsibleButton_zr6a">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Frontend Guide</h1></header><p>In this section you will find a guide on how to develop frontends with the foomo stack. Please also see the <a href="/docs/general/intro">general guide</a>.</p><p>Let me share a few thoughts on frontend development from our journey <a href="https://www.bestbytes.com" target="_blank" rel="noopener noreferrer">@bestbytes</a> the company behind <a href="https://www.foomo.org" target="_blank" rel="noopener noreferrer">https://www.foomo.org</a> .</p><p>Web development has been a wild ride since the beginning of the www in the mid 1990s. Today we take it as granted, that the default way to build applications is with web technologies.</p><p>Not too long ago this seemed absurd, since browsers were meant to share scientific research papers and therefore were extremely limited in their capabilities.</p><p>It was the era of experimentation, that turned the web into the application runtime, which it is today. Plugins like Macromedias flash inspired the rich APIs we can use today, when building web applications.</p><h2 class="anchor anchorWithStickyNavbar_y2LR" id="a-little-history">A little history<a class="hash-link" href="#a-little-history" title="Direct link to heading"></a></h2><p>The current <a href="/docs/frontend/stack">stack</a> is the result of a more than 20 year journey.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="last-millenium">Last millenium<a class="hash-link" href="#last-millenium" title="Direct link to heading"></a></h3><p>The open source eco system was in its infancy, there was no github (is that really open source as it should be 🤔), there was not even git, there were no real web frameworks and agile methodologies were an exotic nerd topic.</p><p>Browsers would sometimes render things in a recognisable way and a table was the way to render your layout. <strong>Reliable interactivity could only result from a server round trip and calling JavaScript had a good chance to crash your browser</strong>.</p><p>Security in browsers was a complete nightmare, it was a time, when one tab could access anothers tabs dom 🤯</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="early-2000s">Early 2000s<a class="hash-link" href="#early-2000s" title="Direct link to heading"></a></h3><p>As Microsoft had won the browser wars, we were stuck with IE 6 and like others we were building web applications with the limited resources we had. JavaScript frameworks were still </p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="the-plugin-era--flash">The plugin era / FLASH<a class="hash-link" href="#the-plugin-era--flash" title="Direct link to heading"></a></h3><p>As browsers were slow, buggy and inconsistent FLASH presented this amazing way to build highly interactive websites. It was the time of loaders, which people accepted, because amazing experiences awaited them: animated vector graphics (artists went wild ...), games, the first videos, client server communications, sockets and a canvas API.</p><p>Also ActionScript especially AS3 felt so superior to JavaScript at the time.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="flex">Flex<a class="hash-link" href="#flex" title="Direct link to heading"></a></h3><p>Flex used the capabilities of the flash player to provide a fantastic developer experience to build RIAs (rich internet applications). The resulting productivity, application performance and features were unparalled in the JavaScript eco system until long after the demise of the flash player.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="after-thoughts-on-flash">After "thoughts on flash"<a class="hash-link" href="#after-thoughts-on-flash" title="Direct link to heading"></a></h3><p>After the release of the iPhone and the beginning of the walled garden era flash was one of the initial victims. Just for the record, I definitely prefer an independent eco system, which the web is at least to a certain extent, but it certainly was not noble motives, that were driving Apple when pushing for HTML5 in their <a href="https://web.archive.org/web/20170615060422/https://www.apple.com/hotnews/thoughts-on-flash/" target="_blank" rel="noopener noreferrer">thoughts on flash</a>.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="html5">HTML5<a class="hash-link" href="#html5" title="Direct link to heading"></a></h3><p>At its arrival HTML5 could not deliver on the many promises, that were made around it. Browser compatibilty was a nightmare, JavaScript performance was poor, the eco system was in its infancy. </p><p>As we left the flash eco system we stopped by RequireJS and were using <a href="https://backbonejs.org/" target="_blank" rel="noopener noreferrer">BACKBONE.JS</a> as we felt extremely burnt by Adobe, after they had dropped their whole eco system like a hot potatoe once Apple had declared the end of flash.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="typescript-and-the-wild-framework-years">TypeScript and the wild framework years<a class="hash-link" href="#typescript-and-the-wild-framework-years" title="Direct link to heading"></a></h3><p>Despite the fact, that we were very sceptic about trusting large vendors, we adopted TypeScript right after it was initially released and we have remained happy users of it until the present day.</p><p>The early years of the Node.js community were extremely wild, there was jokes about the number of frameworks released per day. The number of languages that compiled to JavaScript exploded and it just seemed impossible to keep up with the changing environment.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="2020s">2020s<a class="hash-link" href="#2020s" title="Direct link to heading"></a></h3><p>As we wake up today as frontend developers, we do not expect, that we will keep on doing things as we do them today until the end of our careers, but we at least see a chance, that the code base of a project will not be outdated with delivery of a MVP.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/foomo/foomo-docs/tree/main/foomo/docs/frontend/intro.md" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_mS5F" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mt2f"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/frontend/css"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">CSS</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_vrFS thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-little-history" class="table-of-contents__link toc-highlight">A little history</a><ul><li><a href="#last-millenium" class="table-of-contents__link toc-highlight">Last millenium</a></li><li><a href="#early-2000s" class="table-of-contents__link toc-highlight">Early 2000s</a></li><li><a href="#the-plugin-era--flash" class="table-of-contents__link toc-highlight">The plugin era / FLASH</a></li><li><a href="#flex" class="table-of-contents__link toc-highlight">Flex</a></li><li><a href="#after-thoughts-on-flash" class="table-of-contents__link toc-highlight">After "thoughts on flash"</a></li><li><a href="#html5" class="table-of-contents__link toc-highlight">HTML5</a></li><li><a href="#typescript-and-the-wild-framework-years" class="table-of-contents__link toc-highlight">TypeScript and the wild framework years</a></li><li><a href="#2020s" class="table-of-contents__link toc-highlight">2020s</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">legal</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/etc/imprint">Imprint</a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">© 2022 bestbytes</div></div></div></footer></div>
|
||
<script src="/assets/js/runtime~main.0b7c6ff0.js"></script>
|
||
<script src="/assets/js/main.52cf6153.js"></script>
|
||
</body>
|
||
</html> |