foomo-docs/assets/js/8047a11d.2cc7a80f.js

"use strict";(self.webpackChunkfoomo=self.webpackChunkfoomo||[]).push([[405],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>u});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),s=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=s(e.components);return r.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),f=s(n),u=o,m=f["".concat(l,".").concat(u)]||f[u]||d[u]||a;return n?r.createElement(m,i(i({ref:t},p),{},{components:n})):r.createElement(m,i({ref:t},p))}));function u(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var s=2;s<a;s++)i[s]=n[s];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}f.displayName="MDXCreateElement"},9232:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>c,toc:()=>s});var r=n(7462),o=(n(7294),n(3905));const a={title:"Stack",sidebar_position:3,tags:["frontend","overview"]},i="Frontend Stack",c={unversionedId:"frontend/stack",id:"frontend/stack",title:"Stack",description:'Our frontend stack is permanently changing as the underlying eco system does. We are trying to adopt technologies at the "Slope of Enlightenment" in the hype cycle.',source:"@site/docs/frontend/stack.md",sourceDirName:"frontend",slug:"/frontend/stack",permalink:"/docs/frontend/stack",draft:!1,editUrl:"https://github.com/foomo/foomo-docs/tree/main/foomo/docs/frontend/stack.md",tags:[{label:"frontend",permalink:"/docs/tags/frontend"},{label:"overview",permalink:"/docs/tags/overview"}],version:"current",sidebarPosition:3,frontMatter:{title:"Stack",sidebar_position:3,tags:["frontend","overview"]},sidebar:"frontendSidebar",previous:{title:"Setup",permalink:"/docs/frontend/setup"},next:{title:"Performance",permalink:"/docs/frontend/performance"}},l={},s=[{value:"TypeScript",id:"typescript",level:2},{value:"React / Preact",id:"react--preact",level:2},{value:"gotsrpc",id:"gotsrpc",level:2}],p={toc:s};function d(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"frontend-stack"},"Frontend Stack"),(0,o.kt)("p",null,'Our frontend stack is permanently changing as the underlying eco system does. We are trying to adopt technologies at the "Slope of Enlightenment" in the ',(0,o.kt)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/Gartner_hype_cycle"},"hype cycle"),"."),(0,o.kt)("p",null,"Former iterations of our stack were MVC or MVVM frontend frameworks. Since the arrival of React and state mangement libraries like Redux and Zustand we have been building reactive applications. "),(0,o.kt)("p",null,"Reactive frontends are fun to develop and they scale."),(0,o.kt)("h2",{id:"typescript"},"TypeScript"),(0,o.kt)("p",null,"Is our language of choice to build frontends for web applications."),(0,o.kt)("p",null,"We have adopted TypeScript very early, right after its initial public release in 2012. Here is a list of motives:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"it is a superset JavaScript"),(0,o.kt)("li",{parentName:"ul"},"it does not try to replace JavaScript like many other languages, which compile to JavaScript, it tries to complement and improve it, while staying compatible"),(0,o.kt)("li",{parentName:"ul"},"good type system"),(0,o.kt)("li",{parentName:"ul"},"great tooling")),(0,o.kt)("p",null,"While it seemed to be crazy to trust Microsoft as a friendly open source company, we have not been disappointed so far."),(0,o.kt)("h2",{id:"react--preact"},"React / Preact"),(0,o.kt)("p",null,"Declarative components and views, fast to develop and fast at runtime."),(0,o.kt)("h2",{id:"gotsrpc"},"gotsrpc"),(0,o.kt)("p",null,"Since we are building services in Go and not with Node.js we have created a light weight RPC framework to integrate TypeScript with Go. "),(0,o.kt)("p",null,"When creating TS definitions on the Go side we follow ",(0,o.kt)("strong",{parentName:"p"},"camel case")," convention of naming fields e.g. ",(0,o.kt)("inlineCode",{parentName:"p"},"lastDateModified")," instead of ",(0,o.kt)("inlineCode",{parentName:"p"},"LastDateModified"),"."))}d.isMDXComponent=!0}}]);