Features of the Frontity Framework

👨‍💻 Framework Development » Framework Design
1

I want to start a post to gather all the Frontity Framework features so it’s easier to update and reference them in the future.

I’ll start with some. We can elaborate later.

  • Zero Setup
  • Server Side Rendering
  • Code Splitting
  • Dev Tools
  • Ready for Serverless
  • Offline (service workers)
  • One Code Base: Client + Server + AMP
  • Extensible
  • Perfect Lighthouse Score

EDIT: You can check our docs to see all the features updated >> https://docs.frontity.org/frontity-features

2
  • Google AMP Support
  • Two bundles:
    • es5 (old browsers): transpiled, pollyfils
    • es6 (new browsers): smaller, faster
  • Fallback to AMP for really old browsers (Internet Explorer, Android 2-3…)
3

I’ve moved it to Content. I think it has more sense here because it’s communication.

4

Scale to milions

  • Horizontal scaling
  • Serverless ready

We can also use this benchmark of Node vs WordPress when we talk about the server performance improvement and scaling options with Frontity:

nodejs-vs-php-performance-requests-per-second

1 Like
5

More useful texts for the website or GitHub:

  • (Almost) Instant initial load
    • Frontity sends an HTML that is ready to start navigating the site, so the initial load feels almost instant. No extra assets or round trips are necessary.
    • This HTML is fully functional and navigable without Javascript.
    • Once React loads, it takes control of the app. Users don’t notice any change, it is 100% transparent.
  • Instant in-app navigation
    • Once React has loaded, our router prefetches other routes and data automatically. Users never have to wait when they navigate inside the app.
  • Google AMP with the same codebase
    • Themes made with Frontity are able to render an AMP compatible version with the same React code and CSS used for the HTML version.
  • Extensible via Frontity extensions and NPM packages
    • There are lots of Frontity extensions already available: Adsense, SmartAds, Doubleclick, OneSignal, Disqus, Google Analytics, Tag Manager, ComScore, Yoast SEO…
    • Apart from extensions, there are many interface tools specifically created for Frontity: context routing, swipe navigation, infinite scrolling, html-to-react, gutenberg-to-react…
    • Frontity themes can also use any of the 80.000 React packages currently available in NPM.
  • Zero setup development
    • Everything is already wired up: React, Webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing…
  • Enhanced user experiences
    • With React, it’s really easy to create modern, native-like, user experiences. Things like our own “swipe-to-next” or TechCrunch’s “expand-to-read” experiences.
  • Smallest React bundle possible
    • We have reduced our core by 60%. Now it weights only 60Kb (gzipped).
  • Modern Javascript with ES5 fallback
    • Frontity now produces two JavaScript bundles out of the box: one transpiled for old ES5 browsers with polyfills and one 40% smaller for modern browsers.
  • Best Lighthouse score
    • Frontity is optimized to get the maximum score in Lighthouse out of the box. Theme developers start with 100 and they just need to maintain it while they add features to their theme.
  • Serverless and horizontal scaling
    • The Frontity server is so small it suits perfectly the serverless requirements. That means infinite scaling for the front-end.
    • Frontity is also prepared to scale horizontally in any Node server.
  • Ready for React Concurrent and Suspense
    • The React team is working hard to release an async, “no-CPU-blocking” version and Frontity is already compatible with it. It is expected for Q2 2019.
    • Once it is released, we expect to see a rise in the use of the React animation libraries available that will get the user experience to the next level.
  • PWA & Offline
    • Themes made with Frontity work offline without any extra configuration via service workers.
    • It also works with the WordPress manifest to get full PWA compatibility out of the box.
6

Battle tested, explaining how we have used it to serve millions of pages in production.

7

Perfect accessibility by default and tools that let the developer know if they break it.

9

@development-team could you let me know what features are included in the beta version? Thanks!

10

I think these are the ones that will be ready for the beta:

  • Zero setup development
  • (Almost) Instant initial load
  • Instant in-app navigation
  • Google AMP with the same codebase
  • Smallest React bundle possible
  • Extensible via Frontity extensions and NPM packages
  • Serverless and horizontal scaling
  • Server Side Rendering
  • Code Splitting
2 Likes
11

Great, thanks @luisherranz! :relaxed:

12

Some descriptions here that were missing:

Server Side Rendering

Frontity responds with a fully populated HTML file generated with React. This reduces the time required for the first contentful paint and ensures that the SEO is not harmed.

Code Splitting

Frontity uses webpack to split the code and send the minimum code required for the app to work. Also allows developers to dynamically load components with the help of loadable-components.

@development-team could you add a description for the “Dev tools” feature as well?

13

@Reyes, I think we are going to leave devtools out of the beta features because the current devtools are from a library we won’t be using in the near future. It may be confusing for the initial users if we put emphasis on those.

14

I’ve described it earlier as “two bundles”:

Two bundles :

  • es5 (old browsers): transpiled, pollyfils
  • es6 (new browsers): smaller, faster

Maybe Support for ES6 in modern browsers is a better name. The explanation coude be:

Frontity generates two bundles of JavaScript:

  • One in ES6 without transpilation or polyfills so it’s as small and fast as possible.
  • The other in ES5 for the old browsers that don’t support ES6.

This guarantees that performance is not harmed in the modern browsers while ensuring backwards compatibility with the old ones.

1 Like
15

Hey guys,

I am going to move all the features to one page at the docs. According to the messages below, to sum up, the main features and their state when beta is launched would be:

  • Zero setup development :white_check_mark:
  • Instant initial load :white_check_mark:
  • Instant in-app navigation :white_check_mark:
  • Google AMP with the same codebase :white_check_mark:
  • Serverless and horizontal scaling :white_check_mark:
  • Server Side Rendering :white_check_mark:
  • Extensible :white_check_mark:
  • Code Splitting :white_check_mark:
  • Battle-tested :white_check_mark:
  • Smallest React bundle possible :white_check_mark:
  • Best Lighthouse score :soon:
  • PWA and offline support :soon:
  • Perfect accessibility :soon:
  • Support for ES6 in modern browsers :soon:
  • Ready for React Concurrent and Suspense :soon:
  • Fallback for really old browsers :soon:

@development-team Could you check if this is correct please? If you miss anything feel free to share it :grin:

16

This is already in the beta :frontity:

I think this is in the beta as well, but it is difficult to know because React Concurrent has not been released yet. You can include it.

Apart from that, we have full Typescript support and I think it may be important to mention that as well.

First class TypeScript support

Frontity has amazing TypeScript support. Actually, we like it so much that Frontity itself is built using TypeScript. But don’t worry, it’s absolutely optional: if you don’t know or don’t want to learn you can use regular JavaScript without problems!

17

This should be: Fallback to AMP on really old browsers :soon:

18

Thanks, @luisherranz! I have updated it

Do you think we should also mention that at the moment we support wordpress.com and wordpress.org? Or maybe another page to include future sources as it could be WPGraphQL?

19

Yes, that’s a good one.

We have a topic here in the forum.

20

Another one: Support for multiple sites with different themes and/or configuration in the same project.

EDIT: I’m sure it can explained better :sweat_smile:

21

Okay, so I will include it on the docs too and add a link to that topic to discuss other possible sources.

I am not sure if I understand this one :smile: You mean that Frontity could work like Wordpress, where you can have different themes installed and Wordpress Multisite, where you can have different domains under the same Wordpress installation?