Giter Site home page Giter Site logo

pheasantframework / pheasant Goto Github PK

View Code? Open in Web Editor NEW
21.0 3.0 0.0 422 KB

The Pheasant Framework is an innovative and powerful frontend web framework. It is used for making powerful and progressive web apps ontop of the Dart language.

License: MIT License

SCSS 0.33% CSS 0.48% HTML 0.23% Dart 98.83% Sass 0.13%
dart dartlang pheasant pheasant-framework

pheasant's Introduction

Pheasant

Pub Version Pub Publisher GitHub License

Pheasant is a modern-day, progressive, fast-reload, powerful frontend web framework and platform written, and operated with in the Dart Language, with support for JavaScript. It grants all the features of modern web development (Web Components, HTML Rendering and more) with the dynamic power of Dart.

What's All The Hype?

When it comes to web development, developers are constantly looking for better ways to make powerful apps faster. That's why the Pheasant Framework is here:

  • Use JavaScript and Dart Together: Pheasant is a powerful framework for building progressive web applications with the power, speed and versatility of the Dart Language, while also giving room to JavaScript Developers by allowing you to extend your Dart, and Pheasant, code with the strength of JavaScript. That way, Pheasant appeals to all kinds of web developers.

  • Fast Reload and Build Process: The Pheasant Framework is able to work the way it does thanks to the power of the Dart Language, as it has out-of-the-box fast-reloading, and fast building of code. Pheasant projects can easily be made, configured and built with one-liner commands. The Framework automatically watches all files and updates the UI once a change is made, eliminating the need for external build frameworks, so you can focus on your application. Creating your projects are also much faster, as the framework doesn't use so many libraries, nor does it need to depend on node_modules like other similar JavaScript Frameworks.

  • In-Built CSS Preprocessing: The Pheasant Framework contains in-built support for CSS Preprocessing using sass, as well as a simple API for web components and the ability to statically generate sites with in-built support for markdown rendering.

  • Zero Virtual DOM: The Pheasant Framework also compiles your code, so there is no need to ship a virtual DOM, instead all pheasant code is compiled to Dart code, with some pheasant-specific modifications, that can be injected directly into the HTML DOM.

How Does It Work?

Pheasant works by rendering components in .phs files. These files consist of three parts:

  1. The template which contains html-like syntax, backed in with special pheasant components to help easily and dynamically render code in your web app
<template>
<div id="output">
    <p>Hello World, Welcome to Pheasant</p>
    <p>{{myNum}}</p>
</div>
</template>
  1. The script which contains Dart data located inside it, which can be used in the template part for rendering. Here you can simply write plain Dart Code, and import dart libraries as well as other Pheasant Files/Components.
<script>
int myNum = 9;

void addNum() {
    myNum++;
}
</script>
  1. The style which contains either global or local styling for the template components
<style syntax="scss">
$primary-color: red;

#output {
    font-family: verdana;
    color: blue;
    background-color: powderblue;
}

p {
    color: $primary-color;
}
</style>

Getting Started

In order to get started with the web framework, you will need to install the pheasant command line interface - pheasant.

Clone this repository

You can clone this repository to your local system, then you can go ahead and do the following:

  1. Install the pheasant cli by compiling the compiler:
dart compile pheasant_cli/bin/pheasant.dart -o pheasant
  1. Export the executable to your PATH variable, in order to use it anywhere in your code.

  2. Start using the pheasant cli and make use of it. You can check the version of the cli by using the following command:

pheasant -v

Install the CLI

You can also install the pheasant cli through various means, but for now we only support using pub.dev:

dart pub global activate pheasant_cli

Then you can confirm the CLI is working

pheasant -v

For more information on how the cli works, you can check it out here

Documentation

Read our documentation in order to see how the framework works.

Check out the Getting Started page for a quick overview.

Example Usage

Here is an example pheasant file, and how the main.dart file looks like:

Pheasant File

<script>
int myNum = 9;

void addNum() {
    myNum++;
}
</script>

<template>
<div id="output">
    <p>Hello World, Welcome to Pheasant</p>
    <p>{{myNum}}</p>
</div>
</template>

<style>
#output {
    font-family: verdana;
    color: blue;
    background-color: powderblue;
}

p {
    color: red;
}
</style>

Dart Main File

import 'package:pheasant/pheasant.dart';

// File will be generated.
import 'package:<pkg-name>/main.phs.dart';

void main() {
  createApp(App);
}

Composition

The Pheasant Framework, as of the current version, contains 4 packages:

  1. pheasant_temp: The Pheasant Framework Templating package. This is where the main functionality of the Pheasant Framework operates. You can check it out here.

  2. pheasant_build: The Pheasant Framework Build package. This is the building process for the Pheasant Framework. You can check it out here.

  3. pheasant_meta: The Pheasant Framework Metadata package. This is where the metadata or annotations used in sibling packages (packages used in the framework) are defined. You can check it out here.

  4. pheasant_assets: The Pheasant Framework Assets/Styles Engine. This is used for rendering, processing and scoping styles indicated in the <style> part of a pheasant file. It has inbuilt support for not only css, but also for sass and scss (for more on sass, check them out here).

Source Code Published Version Pre-Release Version
pheasant_temp Pub Version Pub Version
pheasant_assets Pub Version Pub Version
pheasant_build Pub Version Pub Version
pheasant_meta Pub Version Pub Version

Contributing

All contributions are welcome, and we continuously review them to make necessary and important changes to our framework.

Please read the contribution file and the code of conduct for more information on how you can make a contribution.

License

This package is licensed under the MIT License.

pheasant's People

Contributors

nikeokoronkwo avatar pheasant-framework avatar dependabot[bot] avatar

Stargazers

 avatar Brian Wo avatar Connor Johnson avatar Yuan JIN avatar  avatar Arin Abdulmajeed avatar Kaleb McKinney avatar PT avatar  avatar Ifeanyichukwu Orji avatar Chima Precious avatar  avatar Afroz Shaikh avatar Godwin Mathias avatar getBoolean avatar Patt O'Brien avatar  avatar Eric Guerin avatar Richardedom avatar moin avatar  avatar

Watchers

 avatar  avatar  avatar

pheasant's Issues

Frontend Tooling

The pheasant CLI depends on webdev for working with Pheasant Applications. However, this has not helped in making pheasant applications as reliable, responsive and powerful as they should.

In order to address these issues, work has started on making Dyte, which will be a frontend tool for making Dart Web Applications easily. This tool is intended to be used in any Dart Web Application, but will also be the tool of choice instead of the Pheasant CLI for making Pheasant Applications.

More information can be found at the repository.

Migrating Submodules to Main Repo

This issue is a disclaimer that the repositories for the Pheasant Sibling Packages (pheasant_temp, pheasant_meta, pheasant_build and pheasant_assets) will be archived and soon removed. These packages will instead be migrated to the main pheasant repository here.

This is to aid in generated workflow builds and to make development easier for all packages used in the pheasant framework.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.