This content originally appeared on DEV Community and was authored by Own Alazzam

lo I Will Show you And Talikng About New TypeScript Framework Powerful Than React, VueJS, Anglur with new web architect thats prefer creating complex componets easliy without any diffculty

before start reading i hope to give me a star on github

Maxa

is A Powerful TypeScript Library For Creating Beautiful UIs, Secure, Fast And Flexible Web Apps Only Using PowerFul Languages TypeScript And Sass

• Components-Based & State Management : Build Complex UI Components Easily that's logic is written in TypesScript Files and pass rich data through your app and make it secure no one can know your data.
• Ultimate Apps : Maxa Build Your Own App Faster And Simplify + Minify Your Code To Get High Performance.
• Lightweight : Maxa Make Your Own App Optimized And LightWeight On Server That Load Fast With Electron Apps Without No More Optimization Steps.
• Self Management : Maxa have A Built-In Element SelfReferencePlugin Management Functions.
• Rich With Web APIs : You Can Use Web APIs Easily Like WebShare,Vibration,Notification And More.
• Robust Routing : Robust And Fast Routing Client Side To Make Single Page Apps Fast.
• Electron To Easy : You Can Easily Embed Your App inside Electron App And Deploy, Manage, Build And Create Installers With Some Commands. coming soon

Content

• Installation
• Basics
  • Main Architect
  • Elements Has Special Typeing
  • Fragment
  • Comments
  • Text
• Engine
  • render()
  • head()
  • onRender()
  • beforeUnload()
  • isRender
• Components
  • Component Based Function
  • Using Array
  • Using Fragment
  • Using Element
• Client-Side Router
  • routerEngine()
  • routerLink()
  • views
• DOM-Manipulation
  • $()
• Statements
  • $if()
  • $forEach()
  • $time()
  • $runtime()
  • $window()

⚠️ Maxa is Not Fully Supported Because its a beta version the supported version that starts from 1.0.0

Installation

• Create Maxa App With Powerful Build Tools using Maxa-CLI

$ npm i -g maxa-cli

import {fragment, button, Engine} from "maxa";
import './App.scss'

function App() {
    retrun fragment([
        button({id: ""}, (btn) => {
            const data = {
                count: 0,
            };
            btn.click(() => {
                count++;
                return "click times : " + count;
            });
            return "click times : " + count;
        })
    ])
}

const Main = new Engine();

Main.render(App(), document.body, () => {
    console.log('App Loaded!')
});

Follow GitHub Wiki For More Here

Create HelloWorld Project

To get started with maxa you must have knowledge by Basic Web Tecnoologies Such As HTML, CSS and JS

Check out if you install maxa-cli via NPM

Install Maxa-CLI

$ npm i -g maxa-cli

then you can easily create a simple app with maxa

$ maxa create 

then maxa-cli make all you need it to start

Create New App

$ maxa create app

Creating app Project........
Installing Dependencies........

Project Created Successfully.......


Useful Commands

 cd app
 ---> to go inside project dir
 
  maxa start
 --> to start a development server of maxa
 
  maxa build
 --> to create a build production

  npm run test
 --> to start jet test runner

Happy Hacking

compile Command

then to start your app you have two command if you embed it at expressJS you should use this command to start without devServer

$ npm compile

or start with webpack devServer

$ npm start //starting on port 3000 auto

or 

$ npm start  //starting using cutom port

Build Command

to create build production of your app

$ maxa build  //if you want to custom output dir

or
 
$ maxa build // dircet output to build dir

then your app is able to serve easliy

Basics

There Are 3 Forms For Writing HTML Element

Main Architect

/*ElementName*/(/*Attributes*/,/*Data*/);

write Data Dircet To Element

//string
pre(null,"Hello");

//boolean
pre(null,true);

//numbers
pre(null,10);

write Multi Data Inside Element

//string
p(null,[
   //HTMLElement
   pre(null,10),
   //String
  "Hello",
  //Number
  254,
  //boolean
  true,
]);

write Data And Access Element API

• but must return any data to append it inside element this is required

button({ id: "" }, (btn:HTMLButtonElement) => {
  const data = {
    count: 0,
  };
  btn.addEventListener('click',() => {
    count++;
    btn.innerHTML = "click times : " + count;
  });
  return "click times : " + count;
});

To Make Element Without Data or Attributes use null keyword

//without attriubtes
p(null,"Hello World"),

//without data
img({src:'./mypic.png'},null),

Elements Has Special Typeing

span , br Tags

this elements not require type attributes or data

img image tag

this element must write attributes but not require data

h1, h2, h3, h4, h5 and h6

this wirting size 1 | 2 | 3 | 4 | 5 | 6 then attributes and data

h_(/*Size*/,/*Attributes*/,/*Data*/)

also you can store the element inside variable

const x = button(null,"Hello")
x.addEventListener('click',() => {
    x.innerHTML="Hello"
});

Fragment

you can easliy create a fragment in maxa

div(null,fragment([
   pre(null,10),
   pre(null,10),
   pre(null,10),
]))

Comments

you also add html comments

div(null,[
   pre(null,10),
   comment('Hello'),
   pre(null,10),
])

Text

you also add text nodes

div(null,[
   pre(null,25),
   text('Hello'),
   pre(null,10),
])

Engine

This Engine is A constructor you must access it to access all engine methouds

const _App_ = new Engine();

render()

this is one method to render your own app render() you must give it two parameters the main component and output element

const _App_ = new Engine();

_App_.render(/*Main Component*/,/*Element Dist*/)

//Like This 

_App_.render(App(),document.body)

head()

this methoud able to add element to head tag

const _App_ = new Engine();

_App_.head(/*data*/)

//Like This 

_App_.head([
  meta({/*Any*/},null)
])

onRender()

execute event on rendering your app

const _App_ = new Engine();

_App_.onRender(/*Action*/)

//Like This 

_App_.onRender(()=>{
   console.log('App Rendered')
})

beforeUnload()

execute event on window unload

const _App_ = new Engine();

_App_.beforeUnload(/*Action*/)

//Like This 

_App_.beforeUnload(()=>{
   console.log('unLoad')
})

isRender

returns if app is render

const _App_ = new Engine();

_App_.isRender;//false

//Like This 

if(_App_.isRender===true)
   console.log('Rendered')
}else{
  console.log('not Rendered')
}

Component

Component Based Function

thats easily to create a components in maxa but there are two forms to write it

Using Array

function /*Name*/(/*Parameters*/){
   return [ 
      /*Data*/  
   ]
}

functon Hello(Name:string){
   return [
      h_(2,null,'Hello '+Name)
   ]
}

function App(){
  return [
    ...Hello('John')
  ]
}

explain : if you create a component you must before it write ... to return all inside array but there are a better than it

Using Fragment

function /*Name*/(/*Parameters*/){
   return fragment([ 
      /*Data*/  
   ])
}

functon Hello(Name:string){
   return fragment([
      h_(2,null,'Hello '+Name)
   ])
}

function App(){
  return [
    Hello('John')
  ]
}

explain : if you using fragment you should not using ... to define it only write a name of components like the example at above

Using Element

function /*Name*/(/*Parameters*/){
   return /*Element*/(/*Attributes*/,[/*Data*/])
}

functon RedButton(Name:string){
   return button({style:"background:red;"},Name)
}

function App(){
  return [
    RedButton('Max')
  ]
}

explain : it is return the element then you should not using ... to define it

You Can Easily Add Router To You Project

routerEngine()

this function mean starts the router

Example

routerEngine(
  {
    before: () => {
      console.log("Loading App");
    },
    routes: [
      { path: "/", view: Index, data: {Name:'Jeff'} },
    ],
    after: () => {
      console.log("App Loaded");
    },
    error404: { path: "", view: Error404, ignoreRoutesPaths: [] },
  },
  document.body
);

explain :

• Data
  • before()=>void this execute a function before start router
  • routes[] this array must be contains all you app routes to execute it
  • after()=>void this execute a function after router executed
  • error404 this execute a error404 page in client side
• document.body is a dist to render views inside it you can change it to any element

routerLink()

this function to go to route view

routerLink(/*route path*/,/*Data*/)

//example

routerLink('/hello','go to hello')

views

views is page to render data to router and get data from router

class Index extends View {
  constructor(params) {
    super(params);
  }

  getRoutePath;

  title = /*title*/;

  beforeLoad?() {/*Any Thing*/}

  onLoad() {/*Any Thing*/}

  data;

  head() {
    return[
      /*Data*/
    ];
  }

  render() {
    return [
      /*Data*/
    ];
  }
}

explain :

• params get a url params of route is loaded
• getRoutePath to get the route name for this view
• title is for setting page title on route execute
• beforeLoad()=>void to execute function before load the view
• onLoad to execute function after view is loaded
• data to get data from route data
• head()=>[] to add data to head tag on route execution
• render()=>[] to render data to app

dom manipulation

maxa have a dom manipulation library like jquery to make development fast and easliy

$()

to select element and return all this functions

$(/*Element*/)

//example

$('buton#hello').on(/*type*/,/*action*/) //to add event listener to element

$('buton#hello').toggleClass(/*class Name*/) //toggle class name

$('buton#hello').addClass(/*class Name*/) //add class name to element

$('buton#hello').removeClass(/*class Name*/) //remove class name from element

$('buton#hello').replaceClass(/*old*/,/*new*/) //replace a element class name

$('buton#hello').children([/*Childern*/]) //append childern to element

$('buton#hello').attributes({/*Childern*/}) // add attributes to elements

$('buton#hello').hidden() //execute hidden attribute on element

$('buton#hello').html(/*Data*/) //add data as html content inside element

$('buton#hello').addChild(/*Elements*/) //add single element to element

$('buton#hello').css({/*css propertys*/}) //add a css properties to element

$('buton#hello').toggleHide(/*Display type block | flex | inlineblock ..etc. */) // toggle display from hidden to Display type block | flex | inlineblock ..etc. and vis versa

$('buton#hello').click(()=>{/*Action*/}) //add a clicks listener to element

$('buton#hello').mouseOver(()=>{/*Action*/}) //add a mouseOver listener to element

$('buton#hello').doubleClick(()=>{/*Action*/}) //add a doubleClick listener to element

$('buton#hello').drag(()=>{/*Action*/}) //add a drag listener to element

$('buton#hello').keyDown(()=>{/*Action*/}) //add a keyDown listener to element

$('buton#hello').keyPress(()=>{/*Action*/}) //add a keyPress listener to element

$('buton#hello').keyUp(()=>{/*Action*/}) //add a keyUp listener to element

$('buton#hello').load(()=>{/*Action*/}) //add a load listener to element

$('buton#hello').mouseEnter(()=>{/*Action*/}) //add a mouseEnter listener to element

$('buton#hello').mouseOut(()=>{/*Action*/}) //add a mouseOut listener to element

$('buton#hello').mouseDown(()=>{/*Action*/}) //add a mouseDown listener to element

$('buton#hello').mouseUp(()=>{/*Action*/}) //add a mouseUp listener to element

$('buton#hello').change(()=>{/*Action*/}) //add a change listener to element

more about dom manipulation soon

maxa have a powerful statments lets to take a look🧐🧐

$if()

this is similiar to if statment but this it use inside this element or elements array and must return a value

let m = true;
p(null,[
  $if(/*condition*/,()=>{/*if true*/},()=>{/*if false*/})
])

//example

let m = true;
p(null,[
  $if(m===true,()=>{
    return"true"
  },()=>{
    return"flase"
  })
])

$forEach()

this might be like Array.map() be it write inside element data or array

const names=[
   "John",
   "Max",
   "Adam"
]

ul(null,[
   $forEach(names,(name)=>[li(null,name)])
])
 // return for each name a li and the name is inside it

$time()

return a data inide array or element after timeout

p(null,[
  $time([h_(2,null,"Hello")],4000) //Shows After 4000ms
])

$runtime()

repeat the code after 0.1ms this might using for checking

let x= 10;

p(null,(p:HTMLParagrahElement)=>{
    $runtime(()=>{
      p.innerHTML=x; // 15 after 0.1
    })
  }
])

button(null,(btn:HTMLButtonElement)=>{
  btn.addEventListener('click',() => {
    x = 150;
  });
  return "Click Me"
})

$window()

this a power full function thats create an new browser with your own component

$window({
  name: "helloWindow",
  width: 100,
  height: 200,
  fullScreen:  "no", //"yes" | "no"
  resizable:  "no",//"yes" | "no"
  titleBar: "yes" ,//"yes" | "no"
  title: "Hello",
  url: /*url*/,
  head: [
    /*Data*/
  ],
  render: [
    /*Data or Component Based Function*/
  ],
  callBack: (data: Window) => {
   console.log('opened')
  },
})

Sass All You Need To Embed Sass StyleSheet is import it dirctly in ts file

import './sassFileName.scss'

only then when you complie it export as css

What is Comming

New Web APIs

new web apis i comming in new version 1.5.0 🚀

A New UI-Components duo-ui

a new ui-component library like material-ui and anglur material and vitfiy🚀🚀

Electron CLI Manager

new electron cli manager for create electron apps ealiy and manage , deploy, create installers and build only with commands😍😍

new statements

new website documention on github pages

thanks for reading ....
please give me a star on github🙏🙏🙏🙏

This content originally appeared on DEV Community and was authored by Own Alazzam