Introducing Ryact - Build Blazing-Fast SPA's with Python

dewball345 — Wed, 19 May 2021 03:00:47 +0000

Ryact is a relatively new framework made by me. I have just started its development, so it may not be fully production-ready, but the demos that I have made work.

Ryact is powered by rapydscript, which is syntactically identical to python. If you know python, you've pretty much mastered rapydscript. However, there are a few kinks here and there, so I suggest you check out their documentation

Ryact is similar to react, with components and state. The main difference, however, is that Ryact doesn't have a virtual dom; instead, each stateful element (element that uses setState) is assigned a unique id and is retrieved and changed(by dom-diffing) when necessary. There isn't much that I have added - just the bare minimum, for now. The source code is around 300 lines of code, including the pre-built hash router. You can find the tutorial at: https://dev.to/pixari/build-a-very-basic-spa-javascript-router-2k4p

View the repository here before continuing:
https://github.com/dewball345/ryact, you'll need it for installation.

Installation

The repo is set up so that you can clone it. You can install it by doing

git clone https://github.com/dewball345/ryact

If you haven't already, here are the steps in install RapydScript.

Type:

npm install rapydscript -g

Once, you have both cloned the repo and installed rapydscript, navigate to the directory and type:

rapydscript execute.pyj --output example/public/index.js --import_path ryact;example --beautify --es6

to view an example page

or type

rapydscript execute.pyj --output main_code/public/index.js --import_path ryact;main_code --beautify --es6

to see the output of your development code.

After executing the first you should see an examples page, and for the second you will see a "hello world"

Here is an example home-page in ryact:

'''
Here we are importing the base classes 
from the ryact library; An important thing 
to note is that rapydscript does not support star imports, 
as they can be abused. Generally, it isn't a good 
practice to use it, so its not that bad of a 
problem, anyway.
'''
from ryact.baseclasses import cre, css, Base
'''
MyApp is a stateless component
(it does not change, so therefore 
it doesn't inherit the setState method)
'''
class MyApp(Base):
    #this is what will be rendered. 
    def render(self):
        '''
        simply put, the cre() function is used to create 
        dom trees. Here, i am creating an h1 element with a 
        20px margin, blue color, and sans-serif font. 
        It's innerText is "Hello ryact..."
        If you were to convert this to html, you would get 
        <h1 
          style="margin:20px;color:blue;font-family:sans- 
          serif"
        >
           Hello ryact! Rapydscript is great, 
           but ryact makes it 
           better!
        </h1>
        '''
        return cre(
            "h1", {
                '''
                The css function converts a dictionary 
                into a css string. This is mainly for 
                ease of readability, and is optional to use.
                '''
                "style":
                css({
                    "margin": "20px",
                    "color": "blue",
                    "font-family": "sans-serif"
                }),
                '''
                to set the text of a header, use the 
                innerText attribute. There is an innerHTML 
                attribute as well, but I STRONGLY recommend
                to not use it. Instead, keep your 
                children in a third argument, which is a 
                list of html elements.
                '''
                "innerText":
                '''
                Hello ryact! Rapydscript is great, 
                but ryact makes it better!
                '''
            })

'''
You need to have this function, 
as it is called in execute.pyj. If 
you don't know what that is, it is a 
file that is called in the compilation stage.
It references this function and calls it.
'''
def run_app():
    '''
    this appends our component into the "root" div. 
    Unlike react you have to manually call the .render() 
    function. This is deliberate, because it allows you 
    to pass properties that are used throughout the whole 
    class as well as passing arguments to the render() 
    function that may only need to be used by that function.
    '''
    document.getElementById("root").appendChild(MyApp().render())

Features

🐍 The most obvious: Use python(rapydscript, which shares the same syntax as python) instead of javscript
⚛️ Work with a component-based system with state-management when developing SPA's
✨Use preexisting libraries like bootstrap, tailwind, and more!
🔥 Create webpages that are blazing fast

The tutorial can be found on:
https://github.com/dewball345/ryact/blob/master/TUTORIAL.md

Please contribute to the project by submitting a PR or even just adding an issue. Thanks!

DEV Community: dewball345

Introducing Ryact - Build Blazing-Fast SPA's with Python

Installation

Features