Title: Nullstack - Feature-Driven Full Stack JavaScript Components
Open Graph Title: Nullstack - Feature-Driven Full Stack JavaScript Components
Description: Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production
Open Graph Description: Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production
Opengraph URL: https://nullstack.app/
Generator: Created with Nullstack - https://nullstack.app
Domain: nullstack.app
| og:image | https://nullstack.app/image-1200x630.png |
| og:type | website |
| og:site_name | Nullstack |
| og:locale | en-US |
| mobile-web-app-capable | yes |
| apple-mobile-web-app-capable | yes |
| application-name | Nullstack |
| apple-mobile-web-app-title | Nullstack |
| msapplication-starturl | / |
| msapplication-TileColor | #2d3748 |
| nullstack | {"page":{"image":"/image-1200x630.png","status":200,"locale":"en-US","description":"Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production","title":"Nullstack - Feature-Driven Full Stack JavaScript Components"},"environment":{"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"23ad2dd940244ab04e281282c05613bd73043c4f","name":""},"settings":{},"worker":{"enabled":true,"fetching":false,"preload":["/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/frequently-asked-questions","/full-stack-lifecycle","/getting-started","/how-to-customize-webpack","/how-to-deploy-a-nullstack-application","/jsx-elements","/nullstack-logo","/persistent-components","/proxy","/refs","/routes-and-params","/script-runner","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/stateless-components","/static-site-generation","/styles","/transpilation-and-security","/two-way-bindings","/typescript","/what-is-nullstack","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"staleWhileRevalidate":[],"cacheFirst":[],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true},"params":{},"project":{"domain":"nullstack.app","name":"Nullstack","color":"#d22365","viewport":"width=device-width, initial-scale=1, shrink-to-fit=no","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"},"instances":{"application":{"persistent":false},"Header/0-0-0-0":{"expanded":false,"persistent":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Documentation","href":"/getting-started"},{"title":"Examples","href":"/examples"},{"title":"Contributors","href":"/contributors"},{"title":"F.A.Q","href":"/frequently-asked-questions"},{"title":"Waifu","href":"/waifu"}],"menu":{"title":"Toggle Menu"},"action":{"title":"Get Started","href":"/getting-started"},"search":{"title":"Search [ctrl + k]"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"Home/0-0-0-1/":{"persistent":true,"locale":"en-US","i18n":{"title":"Feature-Driven Full Stack JavaScript Components","description":"Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production","hero":{"heading":"Feature-Driven","subHeading":"Full Stack JavaScript Components","descriptions":["Nullstack is a web framework that makes coding fun again.","Write the backend and frontend of a feature in a single isomorphic component with zero boilerplate or glue code."],"getStarted":"Get Started","callToAction":"npx create-nullstack-app","actionLink":"/getting-started","actionCallback":"Command copied, paste it in the terminal"},"trinity":{"heading":"Great for the Dev. Great for the User","subHeading":"from fast SSR to offline PWA out of the box","roles":[{"title":"Optimized for the first render","image":"/illustrations/nulla-tanker.webp","text":"On the first render you'll get SEO ready HTML optimized for the first paint of your route in a single request using local functions with zero JavaScript dependencies in the client bundle"},{"title":"Fluid PWA experience","image":"/illustrations/nulla-healer.webp","text":"After the content is served and the network is idle Nullstack JavaScript is loaded, the state of the application is restored through hydration and it becomes a single page application"},{"title":"Lightweight API requests","image":"/illustrations/nulla-dps.webp","text":"Subsequent server functions will fetch JSON from an automatically generated microservice API, deserialize the response, update the aplication state, and rerender the page out of the box"}]},"features":[{"title":"Never write another API","snippet":"NeverWriteAnotherAPI","image":"/illustrations/nulla-glue.webp","text":"You write features for products. The compiler extracts your front end code and replaces all static async functions with calls to microservices"},{"title":"Easy to read and write","snippet":"Vanilla","image":"/illustrations/nulla-scrolls.webp","inverted":true,"text":"Your components are just POJOs. Take advantage of the existing ecosystem while you write JavaScript or TypeScript as it is supposed to be, and see the result reflected in the DOM."},{"title":"You already know Nullstack","snippet":"Modern","image":"/illustrations/nulla-map.webp","text":"JSX tags follow the HTML standard, routes are simple attributes you can assign to any tag, and links are just anchor tags. You will find out that Nullstack is just a modern version of your current stack."},{"title":"DX with Batteries Included","snippet":"Batteries","image":"/illustrations/nulla-tools.webp","inverted":true,"text":"Nullstack has a lot of out of the box shortcuts that were extracted out of repeating patterns in real projects instead of architecture books. Give it a try and you will get it!"}],"playlist":{"heading":"Learn with our ","slang":"Dweebs","realWord":" Experts","videos":[{"title":"Nullstack at TDC Future","link":"https://www.youtube.com/watch?v=77qeq6cSHG8","thumbnail":"/thumbnails/en-us-tdc.webp"},{"title":"What are JavaScript Components?","link":"https://www.youtube.com/watch?v=H2i5_A1txGI","thumbnail":"/thumbnails/en-us-components.webp"},{"title":"Open Source no Brasil - Ajude a traduzir o Nullstack","link":"https://www.youtube.com/watch?v=ud3IF5Xtd1s","thumbnail":"/thumbnails/en-us-contribute.webp"}]}}},"GlueCode":{"html":"class<\\/span> WaifuCounter<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n // runs in the server<\\/span>\n static<\\/span> async<\\/span> getWaifus<\\/span>(<\\/span>{<\\/span> database }<\\/span><\\/span>)<\\/span> {<\\/span>\n const<\\/span> sql =<\\/span> \"SELECT COUNT(*) FROM WAIFUS\"<\\/span>;<\\/span>\n return<\\/span> database.<\\/span>query<\\/span>(<\\/span>sql)<\\/span>;<\\/span>\n }<\\/span>\n\n // runs in the client<\\/span>\n async<\\/span> countWaifus<\\/span>(<\\/span>)<\\/span> {<\\/span>\n this<\\/span>.<\\/span>waifus =<\\/span> this<\\/span>.<\\/span>getWaifus<\\/span>(<\\/span>)<\\/span>\n }<\\/span>\n\n // runs wherever is best<\\/span>\n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>button<\\/span> onclick<\\/span>=<\\/span>{<\\/span>this<\\/span>.<\\/span>countWaifus}<\\/span><\\/span>><\\/span><\\/span>\n Count<\\/span>:<\\/span> {<\\/span>this<\\/span>.<\\/span>waifus}<\\/span>\n </<\\/span>button<\\/span>><\\/span><\\/span>\n )<\\/span>;<\\/span>\n }<\\/span>\n\n}<\\/span>\n","persistent":false},"NeverWriteAnotherAPI":{"html":"class<\\/span> WaifuCreator<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n // extracted into a microservice<\\/span>\n static<\\/span> async<\\/span> insertWaifu<\\/span>(<\\/span>{<\\/span> database,<\\/span> name }<\\/span><\\/span>)<\\/span> {<\\/span>\n const<\\/span> sql =<\\/span> \"INSERT INTO waifus (name) VALUES (?)\"<\\/span>;<\\/span>\n return<\\/span> database.<\\/span>query<\\/span>(<\\/span>sql,<\\/span> name)<\\/span>;<\\/span>\n }<\\/span>\n\n // invokes the microservice<\\/span>\n async<\\/span> create<\\/span>(<\\/span>)<\\/span> {<\\/span>\n this<\\/span>.<\\/span>insertWaifu<\\/span>(<\\/span>{<\\/span> name<\\/span>:<\\/span> \"Nulla-Chan\"<\\/span> }<\\/span>)<\\/span>\n }<\\/span>\n\n // render in the DOM<\\/span>\n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>button<\\/span> onclick<\\/span>=<\\/span>{<\\/span>this<\\/span>.<\\/span>create}<\\/span><\\/span>><\\/span><\\/span>\n Create Waifu\n </<\\/span>button<\\/span>><\\/span><\\/span>\n )<\\/span>;<\\/span>\n }<\\/span>\n \n}<\\/span>\n","persistent":false},"Vanilla":{"html":"class<\\/span> Vanilla<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n // variables are just variables<\\/span>\n count =<\\/span> 0<\\/span>;<\\/span>\n\n // mutations reflect in the dom<\\/span>\n increment<\\/span>(<\\/span>)<\\/span> {<\\/span>\n this<\\/span>.<\\/span>count++<\\/span>\n }<\\/span>\n \n // 'this' is bound by default<\\/span>\n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>button<\\/span> onclick<\\/span>=<\\/span>{<\\/span>this<\\/span>.<\\/span>increment}<\\/span><\\/span>><\\/span><\\/span> \n {<\\/span>this<\\/span>.<\\/span>count}<\\/span>\n </<\\/span>button<\\/span>><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n\n}<\\/span>","persistent":false},"Modern":{"html":"class<\\/span> Modern<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n // params are injected on every function<\\/span>\n renderWaifu<\\/span>(<\\/span>{<\\/span> params }<\\/span><\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>p<\\/span>><\\/span><\\/span> Hi i'm {<\\/span>params.<\\/span>name}<\\/span> </<\\/span>p<\\/span>><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n\n // routes can have dynamic segments<\\/span>\n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>div<\\/span> class<\\/span>=<\\/span>\"<\\/span>not-class-name\"<\\/span><\\/span>><\\/span><\\/span>\n <<\\/span>Waifu<\\/span><\\/span> route<\\/span>=<\\/span>\"<\\/span>/waifus/:name\"<\\/span><\\/span> /><\\/span><\\/span>\n <<\\/span>a<\\/span> href<\\/span>=<\\/span> |