SPIKE: Investigate frameworks

[birchamp]

What's required for 2.0/ missing from Create 1.0?

What frameworks allow for routing via URL?

• Ionic

• next.js

• Gatsby

• create-react-app

• svelte

• flutter

• remix run (new)

[mannycolon]

Sources

• [x] https://www.robertcooper.me/comparing-nextjs-and-gatsbyjs-static-site-generation
• [x] https://www.gatsbyjs.com/features/jamstack/gatsby-vs-nextjs
• [x] https://medium.com/frontend-digest/which-to-choose-in-2020-nextjs-vs-gatsby-1aa7ca279d8a
• [x] https://www.solutelabs.com/blog/gatsby-js-vs-next-js-which-one-to-choose-when
• [x] https://blog.logrocket.com/next-js-vs-gatsbyjs-a-developers-perspective/
• [x] https://dev.to/jameesy/gatsby-vs-next-js-what-why-and-when-4al5
• [x] https://pagepro.co/blog/next-js-vs-gatsby-which-one-to-choose/
• [x] https://buttercms.com/blog/nextjs-vs-gatsbyjs-picking-the-right-support-react-framework
• [x] https://blog.jakoblind.no/gatsby-vs-next/
• [x] https://jaredpalmer.com/gatsby-vs-nextjs
• [x] https://www.popwebdesign.net/popart_blog/en/2020/11/nextjs-vs-gatsby-which-is-your-best-2021-choice/
• [x] https://nextjs.org/docs/getting-started
• [x] https://www.gatsbyjs.com/docs/
• [x] https://nextjs.org/docs/migrating/from-gatsby
• [x] https://create-react-app.dev/docs/getting-started/
• [x] https://www.youtube.com/watch?v=xC4Yq_mXvPM

[mannycolon]

• [x] https://dev.to/jameesy/gatsby-vs-next-js-what-why-and-when-4al5#:~:text=The%20fundamental%20difference%20is%20Next,HTML%20page%20from%20the%20server.
• [x] https://ionicframework.com/docs/react/quickstart
• [x] https://stackshare.io/stackups/ionic-vs-next-js
• [x] https://flutter.dev/docs
• [x] https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom-59cbebbab9e9
• [x] https://medium.com/javascript-in-plain-english/svelte-vs-react-first-impression-1ce5d3ee6889

[mannycolon]

Findings

• create-react-app will create you a boilerplate of a React project, but Nextjs/Gatsbyjs are not just boilerplates, but toolkits, laying the foundations and then giving you a set of instructions on how to build the house as well. Thus,

  • create-react-app - Lays the foundations of a React Project. The rest is up to you.

  • Gatsby.js & Next.js - Lay the foundations of a React Project. Give you guidelines on how you should build on top of them.

• Remix run is too young and slightly adopted by the community yet very promising. Worth keeping an eye on.
• Svelte is awesome but are we ready to take on such a big paradigm shift? it has minimal community support,
• Flutter Are we ready to start writing code in dart?

Gatsby.js & Next.js

• Both allow for the creation of static sites.
• Gatsby.JS if you are building a static website where the content doesn’t change too often, and Next.JS if it is a complicated site that interacts with a server a lot.
• Both Gatsby and Next come with extensive documentation that helps in developing features over an existing app. You don’t have to learn everything from scratch, and a basic understanding of React is the only prerequisite that both frameworks have.
• If you are looking to build a hybrid web app where you need both — rendering the page UI using SSR (server-side rendering) and handling data to the CSR (client-side rendering), Next.JS trumps over Gatsby.
• Both tools are providing a boilerplate – a fixed project structure that needs to be followed during the development.
  • Having a boilerplate has many great advantages. For example:
    • Better documentation,
    • better tooling,
    • easier setup,
    • better development experience,
    • easier project handover.

Gatsbyjs

• GatsbyJS is deemed to be a static site generator because it generates a bunch of HTML files (along with corresponding JavaScript bundles) in a build process in order to create a static site that can be served on a web server.
• GatsbyJS really shines as a framework when you want to aggregate data from one or many external sources (like a CMS) and generate a static site based on the aggregated data. For example, creating a static blog with content coming from a CMS is easily done with GatsbyJS. GatsbyJS can easily build static pages based on content from a CMS, whereas this would be difficult to do with NextJS's static export feature.
• Gatsby produces static HTML files that will load directly from a CDN.
• Asset optimization, server-side rendering, data pre-fetching, code splitting, among others.

Next.js

• Next.js is a React framework capable of building static websites along with server-side rendered websites.
• Next.js is a framework for creating React applications. It comes with a page-based routing system, static optimization, server-side rendering with data-fetching, automatic code-splitting, client-side routing with page prefetching, built-in CSS (and SASS) support, and API routes.
• Supports TypeScript.
• Supports static site generation. Supports next-generation static site rendering.
• Building a static site with NextJS gives you the flexibility to switch to building a server-side rendered app if the need arises for dynamic website functionality. If unsure if your site will need to include dynamic functionality, I would start out building the site with NextJS's static export feature in order to give you the opportunity to flexibly switch to a server-side rendered application down the road. With the release of NextJS v9, NextJS has some great performance optimizations for pages that don't require any sort of data fetching or dynamic behavior
• Even though it’s advertised as zero-config*, you can configure it with community plugins through your next.config.js file. You can even manually modify the Webpack configuration to add things like aliases.
• Unlike Gatsby, NextJS doesn’t force us to use GraphQL or REST. It remains agnostic and leaves the choice up to you. It allows you to mix and match when you want to use statically rendered pages, and when you want to use server-rendered pages.
• Next.js combines the best of static site generation and server-side rendering. For an e-commerce site, you could statically render pages that don’t change very often. Like your contact page, shipping information, or post blogs. You could server render pages containing dynamic content, like your product pages.
• Next is used to build websites that interact a lot with the server, using features like Hot Code Reloading, Single File components, Automatic Code Splitting, etc. to help you build beautiful React websites.
• You can write a function called getStaticProps which gets executed at build time. Anything that is returned is injected as props into your page component. Even better, you can write any Node.js code in this function as well and it will be removed from the client, so you can use the filesystem.
• Fast Refresh
• Progressive Web Apps

Verdict: Next.js (My opinion)

[mannycolon]

Ionic React

One Codebase, Any Platform

• Ionic React is a native React version of Ionic Framework, the free, open-source SDK powering millions of mission-critical apps all over the world.
• A beautiful front-end framework for developing cross-platform apps with web technologies like Angular and React.
• Free and open-source, Ionic offers a library of mobile and desktop-optimized HTML, CSS, and JS components for building highly interactive apps.
• Ionic allows you to build awesome apps across mobile, desktop, and web, with the React you know and love.
• Ionic React projects are just like React projects, leveraging react-dom, and with setup normally found in a Create React App (CRA) app. For routing and navigation, React Router is used under the hood. Compatible with React version 16.8 and above.
• Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using Capacitor, a modern native runtime. All with one shared codebase.
• Ionic React uses open web standards and built-in browser capabilities, so it's compatible with any of the millions of web libraries out there.
• Along with the UI components, Ionic also provides a command-line tool for creating new apps, as well as deploying to the various platforms we support.
• Focus on native/mobile development. Mostly used when aiming to build apps that work on all platforms (Mobile (iOS, Android), Web, desktop, PWA)

Ionic vs Next.js

• Ionic can be classified as a tool in the "Cross-Platform Mobile Development" category, while Next.js is grouped under "Frameworks (Full Stack)"
• Some of the features offered by Ionic are: Performance obsessed, Utilizes Angular and React, Native focused. On the other hand, Next.js provides the following key features: Zero setup, Use the filesystem as an API, Only JavaScript, everything is a function, Automatic server rendering and code splitting.
• Ionic and Next.js are both open-source tools. It seems that Next.js with 38.7K GitHub stars and 4.69K forks on GitHub has more adoption than Ionic with 38.5K GitHub stars and 13.1K GitHub forks.

[mannycolon]

Create React App v4

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

• Lays the foundations of a React Project. The rest is up to you.
• Create React App eliminates grueling tasks like installing and configuring Webpack and Babel which are preconfigured and hidden, so you can focus on coding. This means less stuff to learn and all you need to do to start creating a React app is run any of the commands above.
• Although Create React App comes with pre-configuration for Webpack and Babel, it does not force you to use its own configuration. You can eject from Create React App and add your custom configurations to your taste.
• Create React App doesn't prescribe a specific routing solution, but React Router is the most popular one.
  • https://reactrouter.com/web/example/basic
  • Note that you may need to configure your production server to support client-side routing before deploying your app.
  • https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
• Fast Refresh
• Typescript support
• Create React App supports code splitting using the dynamic import() directive. Instead of returning the values exported by the module, it will instead return a Promise that resolves into these values. As a result, modules imported this way won’t be included in the final bundle, but built into separate files. This allows you to reduce the size of the final bundle and load content on demand.
• Progressive Web Apps

[mannycolon]

My Top 3

1. Next.js
2. Create React App
3. Ionic React