forked from frontity/frontity
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
50e75ba
commit b6766fd
Showing
1 changed file
with
81 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,141 +1,133 @@ | ||
| # New Document | ||
|
|
||
| <br> | ||
| <div align="center"> | ||
| <img | ||
| src="https://uploads.frontity.org/images/logo/frontity-letters-black-transparent-background.png" | ||
| <a href="https://frontity.org/"> | ||
| <img src="https://frontity.org/wp-content/uploads/2020/02/frontity-blue-logo.svg" | ||
| width="300px" | ||
| /> | ||
| /> </a> | ||
| </div> | ||
| <h1 align="center"> | ||
| Create amazing sites using WordPress & React | ||
| </h1> | ||
|
|
||
| <h2 align="center">The React Framework for WordPress</h2> | ||
| <p align="center"><b>Frontity is the easiest way to create amazing websites using WordPress and React</b></p> | ||
| <br> | ||
| <p align="center"> | ||
| <a href="https://frontity.org">frontity.org</a> | | ||
| <a href="https://docs.frontity.org/getting-started?utm_source=github-readme&utm_medium=get-started-link">Get Started</a> | | ||
| <a href="https://docs.frontity.org/frontity-features">Features</a> | | ||
| <a href="https://docs.frontity.org/getting-started">Docs</a> | | ||
| <a href="https://community.frontity.org/">Community</a> | | ||
| <a href="https://twitter.com/frontity">Twitter</a> | ||
| <a href="https://community.frontity.org/"> | ||
| <img src="https://img.shields.io/discourse/users?color=blue&label=Join%20the%20community&server=https%3A%2F%2Fcommunity.frontity.org%2F&style=for-the-badge&labelColor=000000" alt="Discourse users" /> <a href="https://codesandbox.io/s/github/frontity/frontity-template"> <a href="https://www.npmjs.com/package/frontity"> | ||
| <img src="https://img.shields.io/npm/v/frontity?color=F76D64&style=for-the-badge&labelColor=000000" alt="npm badge" /> </a> <a href="https://github.com/frontity/frontity/blob/master/LICENSE"> | ||
| <img src="https://img.shields.io/badge/license-Apache%202-lightgrey?color=936AF4&label=license&style=for-the-badge&labelColor=000000" alt="License" /> | ||
| </a> | ||
| <p/> | ||
| <p align="center"><b> | ||
| <a href="https://docs.frontity.org/getting-started/quick-start-guide">Get started </a> | | ||
| <a href="https://codesandbox.io/s/github/frontity/frontity-template">Try demo in your browser</a> | | ||
| <a href="https://frontity.org/learn/">Learn Frontity</a> | ||
| </b> | ||
| </p> | ||
| <br> | ||
|
|
||
| --- | ||
| ## What is Frontity Framework? | ||
|
|
||
| > Frontity is a free and open source framework to develop WordPress themes based on ReactJS. To learn more about the framework, its basic concepts and how they work together, check out our docs: | ||
| > | ||
| > - [About Frontity framework](https://docs.frontity.org/#about-frontity-framework) | ||
| > - [Learning Frontity guide](https://docs.frontity.org/learning-frontity) | ||
| > | ||
| > If you can't wait to see what Frontity can do, head over to our [Quick Start Guide](https://docs.frontity.org/getting-started/quick-start-guide) to get up and running! Once you try it out, please [let us know](https://community.frontity.org/) how it goes! We'd love to learn more about your experience and how Frontity can help your project(s). Bug reports will be also highly appreciated. | ||
| > | ||
| > Frontity will continue to be improved during the next months, and new features will be added progressively. | ||
| > | ||
| > Feel free to [subscribe to our newsletter](https://frontity.org/newsletter) to **get notified of the latest framework updates and news**. | ||
| > | ||
| > <div align="center"><a href="https://docs.frontity.org/getting-started?utm_source=github-readme&utm_medium=get-started-link"><strong>GET STARTED!</strong></a></div> | ||
| > <br /> | ||
| [**Frontity**](https://frontity.org/) is a **free and open source framework** for building WordPress websites based on React. It strips away the complexity that entails connecting both WordPress and React, and gives you a big head start by providing many of the most common queries already built in. In short, you can spend the bulk of your time on the development requirements of the project (e.g. the theme) and less time on setting up the project or worrying about tooling and configuration. | ||
|
|
||
| --- | ||
| Frontity's unique approach, with its **ease of use and extensibility pattern** (similar to that of WordPress itself), offers [**distinct advantages**](https://docs.frontity.org/about#key-differences-from-other-react-frameworks) over other similar React frameworks: | ||
|
|
||
| <ul> | ||
| <li><a href="#-what-is-frontity">What is Frontity?</a></li> | ||
| <li><a href="#-how-does-frontity-work">How does Frontity work?</a></li> | ||
| <li><a href="#-how-is-frontity-organized">How is Frontity organized?</a></li> | ||
| <li><a href="#-get-involved-">Get involved 🤗</a></li> | ||
| <li><a href="#-open-source">Open Source</a></li> | ||
| </ul> | ||
| ### » It's 100% focused on WordPress | ||
|
|
||
| # » What is Frontity? | ||
| Each part of the framework has been simplified and optimized to be used with WordPress. This means the number of concepts that you as a developer need to learn are minimal. No complex configuration is necessary to get started, and the queries to the APIs that deliver the content are pre-configured for the things that developers most frequently need. | ||
|
|
||
| **Frontity** can be explained in two different ways: | ||
| ### » It's opinionated | ||
|
|
||
| 1. As an alternative rendering engine for WordPress. | ||
| 1. As a React framework to create WordPress themes. | ||
| Frontity has its own state manager and CSS-in-JS solution. Thanks to that developers don't have to figure out how to configure these tools, or learn other technologies such as Redux or GraphQL. | ||
|
|
||
| Both are true :) | ||
| ### » It's extensible like WordPress | ||
|
|
||
| ## 1. An alternative rendering engine for WordPress | ||
| Frontity powers a very flexible extensibility pattern similar to that of WordPress itself. To add new functionality or expand the capabilities of Frontity, you can use any of the existing **Frontity and npm packages** without having to build them from scratch. | ||
|
|
||
| In the past the only way to get HTML out of WordPress was to use its **PHP rendering engine**. Quite an old friend, isn't it? ;) | ||
| Moreover, [**Frontity packages**](https://api.frontity.org/frontity-packages) (including themes) can be activated and deactivated without code changes and are reusable across projects, helping reduce both development and maintenance times. | ||
|
|
||
| But in WordPress 4.7 the [**WP API**](https://developer.wordpress.org/rest-api/) was included in the core. | ||
| ### » It's rendered dynamically | ||
|
|
||
| > _An API is a protocol to retrieve content from an external service._ | ||
| In Frontity the HTML is rendered dynamically by a Node.js server or a serverless service. This means the HTML does not have to be rebuilt each time the content is edited or new content is published. | ||
|
|
||
| Thanks to the **WP API**, developers are no longer limited to the **PHP rendering engine**. They can retrieve their WordPress content and use it wherever they want. A new world of possibilities started. | ||
| Because of its dynamic approach, Frontity provides a great power and reliability when it comes to frequent and real-time content updates, making it a great fit for those projects with content that might change rapidly or that is expected to grow over time. | ||
|
|
||
| One of those possibilities is to create WordPress themes using React. That's where **Frontity** comes into play. | ||
| **See the [About Frontity](https://docs.frontity.org/about) page in the docs to learn more.** 🤓 | ||
|
|
||
| ## 2. A React framework to create WordPress themes | ||
|
|
||
| [**React**](https://reactjs.org/) is a super powerful library for building user interfaces. It was created by **Facebook** and is taking over front-end development. | ||
| ## How does Frontity work? | ||
|
|
||
| But, in spite of how amazing it is, React is just **a JavaScript library, not a framework**. It does not assume anything about the other parts in any full solution. It focuses on just one thing, and on doing that thing very well. | ||
| In a Frontity project, WordPress is used as a **headless or decoupled CMS**, just for managing the content. Frontity uses data from the WordPress REST API and generates the final HTML that is displayed in the browser using React. | ||
|
|
||
| In order to create a WordPress theme with React, developers need to learn and configure lots of different things: _bundling, transpiling, routing, server rendering, retrieving data from WordPress, managing state, managing css, linting, testing..._ | ||
| With Frontity you still use your WordPress dashboard to edit and create content in exactly the same way that you are accustomed to. As you make changes content is automatically updated in your Frontity site, just as it is when using a traditional WordPress theme. | ||
|
|
||
| **There is a reason React frameworks exist**. For example, [Next.js](https://nextjs.org/) and [GatsbyJS](https://www.gatsbyjs.org/) are two amazing React frameworks. Both _can_ work with WordPress, but they are not focused on WordPress. Therefore, there's still some configuration and additional tooling left to the developer. | ||
| Frontity apps require both a Node.js server and a WordPress server (PHP) to run on. And there are two main Frontity Modes (architectures or configurations): | ||
|
|
||
| [**Frontity**](https://frontity.org), on the other hand, is an **opinionated React framework focused on WordPress**: | ||
| - [**Decoupled Mode**](https://docs.frontity.org/architecture/decoupled-mode) | ||
| - [**Embedded Mode**](https://docs.frontity.org/architecture/embedded-mode) | ||
|
|
||
| - **Focused on WordPress:** each part of the framework has been simplified and optimized to be used with WordPress. | ||
| - **Opinionated framework:** developers don't need to figure out what tools to use for things like css or state management. | ||
| ### Why a different Node.js server? | ||
|
|
||
| This means everything is ready so you can jump in and create a new amazing WordPress theme using React right away! 🎉🚀 | ||
| React is a JavaScript library. In order to generate HTML for site visitors or for Google, the server needs to be able to run JavaScript as well. | ||
|
|
||
| --- | ||
| > _In theory a PHP server can send an empty HTML file with the JavaScript files included and the visitor will see the page after the JavaScript has loaded. However, this is not a good user experience and it is certainly not recommended if your site needs to be SEO friendly and to rank in search engine listings._ | ||
| #### Curious? Learn how to start building your website with Frontity in a few minutes >> [Get Started!](https://docs.frontity.org/getting-started) | ||
| Frontity is prepared to be hosted either in a regular **Node.js** server or in **serverless** services. That makes it super cheap and infinitely scalable. | ||
|
|
||
| --- | ||
| **The [Architecture](https://docs.frontity.org/architecture) page of the docs explains how Frontity works in detail.** 🏗 | ||
|
|
||
| # » How does Frontity work? | ||
|
|
||
| **Frontity** apps live in Node.js, separated from WordPress. | ||
| ## Getting started | ||
|
|
||
| - It uses the WP API to retrieve content and generate the final HTML. | ||
| - It is also capable of generating AMP pages with the same React code and CSS. | ||
| You'll need a WordPress installation and Node.js. See the [**Requirements**](https://docs.frontity.org/getting-started#requirements) page for more information. | ||
|
|
||
| <div align="center"><img alt="Frontity & WordPress explanation" src="https://uploads.frontity.org/images/github/frontity-wordpress-explanation.png" width="600px"></div> | ||
| If you can't wait to see what Frontity can do, head over to the [**Quick Start Guide**](https://docs.frontity.org/getting-started/quick-start-guide). | ||
|
|
||
| ### Why a different Node.js server? | ||
| If you're new to Frontity, we recommend that you check out the [**step-by-step tutorial**](https://tutorial.frontity.org/), which will guide you through the fundamentals of building and deploying your first Frontity website. | ||
|
|
||
| React is a JavaScript library. In order to generate HTML for the visitors or Google, the server needs to be able to run JavaScript as well. | ||
| ## Documentation | ||
|
|
||
| > _In theory a PHP server can send an empty HTML with the JavaScript files and the visitor will see the page after the JavaScript has loaded, but it is not a good user experience and certainly not recommended if your site needs to rank in Google._ | ||
| The Frontity documentation is distributed across three separate sites: | ||
|
|
||
| **Frontity** is prepared to be hosted either in a regular Node.js server or in **serverless** services like [AWS Lambda](https://aws.amazon.com/lambda), [Vercel](https://vercel.com/home), [Netlify](https://www.netlify.com/), [Google Functions](https://cloud.google.com/functions/) and so on. That makes it super cheap and infinitely scalable. | ||
| 1. [**docs.frontity.org**](https://docs.frontity.org/) is the generic documentation. As well as theoretical information, such as Frontity Architecture and Core Concepts, you can find many practical guides here. | ||
| 2. [**api.frontity.org**](https://api.frontity.org/) is the API reference. This is where you can find detailed technical descriptions for the CLI, and for the packages and plugins available in Frontity Framework. | ||
| 3. [**tutorial.frontity.org**](https://tutorial.frontity.org/) is the introductory step-by-step guide. It's designed to provide you with a deep and solid understanding of web development using Frontity. | ||
|
|
||
| Oh, and by the way, **Frontity is extensible**. It allows you to easily add new features to your theme via extensions and NPM packages without having to create them from scratch. Right now, we are working on extensions like _Disqus comments, OneSignal notifications, Adsense, Doubleclick, SmartAds, Google Analytics, Google Tag Manager, Custom CSS or Custom HTML_. This means, Frontity Themes won't have to reinvent the wheel and include the same functionalities over and over. | ||
| **More learning resources, such as videos and example projects, can be found in the [Learn Frontity](https://frontity.org/learn/) page.** 📚 | ||
|
|
||
| --- | ||
| ## Community | ||
|
|
||
| Discover all features here >> **[Frontity features](https://docs.frontity.org/frontity-features)**. | ||
| For general help using Frontity, please refer to the documentation and the available learning resources. If you can't find an answer in these resources you can always check out the [**Frontity Community Forum**](https://community.frontity.org/), which is packed full of answers and solutions to all sorts of Frontity questions. | ||
|
|
||
| --- | ||
| The **community forum** is a great place to ask questions, help fellow users build Frontity apps, and share your projects. It's also where you can keep track of the work done for the framework, join feature discussions, and collaborate on building Frontity itself. | ||
|
|
||
| # » How is Frontity organized? | ||
| Frontity is dedicated to a **positive and inclusive community experience** for everyone. Read through [**this guide**](https://community.frontity.org/t/frontity-community-forum-users-guide/4399) to learn more about the forum guidelines, how it is organized, and how to get the most out of it. | ||
|
|
||
| GitHub is where magic happens, but there are more channels where you can find information about the project, discuss about it and get involved: | ||
| ### Other channels | ||
|
|
||
| <ul> | ||
| <li>📖 <strong>Docs</strong>: this is the place to learn how to build amazing sites with Frontity. <a href="https://docs.frontity.org/getting-started">Get started!</a></li> | ||
| <li>:family_man_woman_girl_boy: <strong>Community</strong>: use our forum to share any doubts, feedback and meet great people. This is your place too to share <a href="https://community.frontity.org/c/dev-talk-questions">how are you planning to use Frontity!</a></li> | ||
| <li>🐞 <strong>GitHub</strong>: we use GitHub for bugs and pull requests, doubts are solved at the community forum.</li> | ||
| <li>🗣 <strong>Social media</strong>: a more informal place to interact with Frontity users, reach out to us on <a href="https://twitter.com/frontity">Twitter.</a></li> | ||
| <li>💌 <strong>Newsletter</strong>: do you want to receive the latest framework updates and news? Subscribe <a href="https://twitter.com/frontity">here.</a></li> | ||
| </ul> | ||
| In addition to the community forum, Frontity has other channels where you can find out more information about the project, join in discussions about it, and also get involved: | ||
|
|
||
| # » Get involved 🤗 | ||
| - [**GitHub**](https://github.com/frontity/frontity): for bug reports and code contributions. | ||
| - [**YouTube channel**](https://www.youtube.com/c/Frontity/): learn from Frontity videos and playlists. | ||
| - [**Newsletter**](https://frontity.org/newsletter/): designed to inform you about the latest product updates, learning resources and community news surrounding Frontity Framework. | ||
| - [**Twitter**](https://twitter.com/frontity) and the [**blog**](https://frontity.org/blog/) are also pretty good places if you're looking for news, case studies, and other updates. | ||
|
|
||
| Do you love WordPress and React? Got questions or feedback? We'd love to hear from you. Come join our [community forum](https://community.frontity.org)! ❤️ | ||
| ## Showcase | ||
|
|
||
| Frontity also welcomes contributions. There are many ways to support the project (and get free swag)! If you don't know where to start, this guide might help >> [How to contribute?](https://docs.frontity.org/contributing/how-to-contribute). | ||
| Want to know who's using Frontity? Need some inspiration for your project? The community is always building amazing projects with Frontity, discover some of them in the [**Showcase**](https://frontity.org/showcase/) page. | ||
|
|
||
| # » Open source | ||
| ## Contributing | ||
|
|
||
| Frontity is licensed under the terms of the [Apache 2.0](https://github.com/frontity/frontity/blob/master/LICENSE) license. | ||
| <br /> | ||
| <br /> | ||
| There are different ways to support the project and get involved. These are a few things that are always welcome: | ||
|
|
||
| --- | ||
| * Testing new features | ||
| * Creating themes/packages and share them on npm or GitHub | ||
| * Creating educational content like blogs, videos, courses | ||
| * Improving the documentation | ||
| * Helping the community | ||
|
|
||
| **See the [Contributing](https://docs.frontity.org/contributing) section of the docs for more information on how to contribute.** ✨ | ||
|
|
||
| ## License | ||
|
|
||
| Frontity is licensed under the terms of the [Apache 2.0](https://github.com/frontity/frontity/blob/master/LICENSE) license. | ||
|
|
||
| Do you miss any important information? Check out [our docs](https://docs.frontity.org/getting-started) or [let us know](https://community.frontity.org/c/framework-development/docs-and-tutorials). |