mirror of
https://github.com/foomo/foomo-docs.git
synced 2025-10-16 12:35:40 +00:00
21 lines
17 KiB
HTML
21 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-frontend/index">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v2.4.1">
|
||
<title data-rh="true">Frontend Guide | foomo project docs</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://www.foomo.org/docs/frontend"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Frontend Guide | foomo project docs"><meta data-rh="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-rh="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-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://www.foomo.org/docs/frontend"><link data-rh="true" rel="alternate" href="https://www.foomo.org/docs/frontend" hreflang="en"><link data-rh="true" rel="alternate" href="https://www.foomo.org/docs/frontend" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://SUATUVZDDM-dsn.algolia.net" crossorigin="anonymous"><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"><link rel="stylesheet" href="/assets/css/styles.a204f99f.css">
|
||
<link rel="preload" href="/assets/js/runtime~main.9b95f4c1.js" as="script">
|
||
<link rel="preload" href="/assets/js/main.5c774faa.js" as="script">
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><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 text--truncate">foomo</b></a><a class="navbar__item navbar__link" href="/docs/general">General</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/frontend">Frontend</a><a class="navbar__item navbar__link" href="/docs/backend">Backend</a><a class="navbar__item navbar__link" href="/docs/devops">DevOps</a><a class="navbar__item navbar__link" href="/docs/projects">Projects</a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/blog">Blog</a><div class="searchBox_ZlJk"><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 id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebarViewport_Xe31"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><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">Frontend Guide</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 menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/docs/frontend/typescript/objects">TypeScript</a></div></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><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/vscode">vscode</a></li></ul></nav></div></div></aside><main class="docMainContainer_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Frontend Guide</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Frontend Guide</h1><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">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_LWe7" id="a-little-history">A little history<a href="#a-little-history" class="hash-link" aria-label="Direct link to A little history" title="Direct link to A little history"></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_LWe7" id="last-millenium">Last millenium<a href="#last-millenium" class="hash-link" aria-label="Direct link to Last millenium" title="Direct link to Last millenium"></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_LWe7" id="early-2000s">Early 2000s<a href="#early-2000s" class="hash-link" aria-label="Direct link to Early 2000s" title="Direct link to Early 2000s"></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_LWe7" id="the-plugin-era--flash">The plugin era / FLASH<a href="#the-plugin-era--flash" class="hash-link" aria-label="Direct link to The plugin era / FLASH" title="Direct link to The plugin era / FLASH"></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_LWe7" id="flex">Flex<a href="#flex" class="hash-link" aria-label="Direct link to Flex" title="Direct link to Flex"></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_LWe7" id="after-thoughts-on-flash">After "thoughts on flash"<a href="#after-thoughts-on-flash" class="hash-link" aria-label="Direct link to After "thoughts on flash"" title="Direct link to After "thoughts on flash""></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_LWe7" id="html5">HTML5<a href="#html5" class="hash-link" aria-label="Direct link to HTML5" title="Direct link to HTML5"></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_LWe7" id="typescript-and-the-wild-framework-years">TypeScript and the wild framework years<a href="#typescript-and-the-wild-framework-years" class="hash-link" aria-label="Direct link to TypeScript and the wild framework years" title="Direct link to TypeScript and the wild framework years"></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_LWe7" id="2020s">2020s<a href="#2020s" class="hash-link" aria-label="Direct link to 2020s" title="Direct link to 2020s"></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/index.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_Z9Sw" 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_vwxv"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href="/docs/frontend/css"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">CSS</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL 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">github</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/foomo" target="_blank" rel="noopener noreferrer" class="footer__link-item">https://github.com/foomo</a></li></ul></div><div class="col footer__col"><div class="footer__title">legal</div><ul class="footer__items clean-list"><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">© 2023 bestbytes</div></div></div></footer></div>
|
||
<script src="/assets/js/runtime~main.9b95f4c1.js"></script>
|
||
<script src="/assets/js/main.5c774faa.js"></script>
|
||
</body>
|
||
</html> |