Prakma
Keep it simple
JS framework to write JSX
- Bridge: You feel uncomfortable with React? Prakma can help you with that.
- Simple: Install and start developing.
- Powerful: Supports state, async functions, children inside components, sass, and more!.
- Awesome: Comes with an easy to handle file structure to make your apps.
➤ What is?
Prakma is a framework to make applications using JSX. The main purpose is separate logic from components, focusing on writing functional components.
With prakma you'll always have two files.
📑 nameComponent.component.jsx
📑 nameComponent.code.jsWhere 'code' is the logic behind that component.
Additional to that, comes with a global state where you can access it in every view!, which makes easy to share data between componentes. When the state change, the HTML change too and just the div where the variable is, don't redraw everything.
Prakma also has a Fetch library to make requests, and has a lot of methods (updating constantly) to help you to do things in the DOM.
Aditionally, comes with an easy to handle file structure to make your apps, so, you just install and start developing, forget of wasting time thinking how to organize your folders and files, Prakma knows you how to do!
➤ Installation
Git clone (recommended)
git clone https://github.com/Leoocast/Prakma.gitnpm installnpm
npm install prakmaLinux / Mac or Windows
Don't worry if you see some errors in the console after run this commands.
npm explore prakma -- npm run export-linuxnpm explore prakma -- npm run export-windowsnpm installThe next step is open dist/home.html, if you see the Prakma logo, you have done great!
➤ Getting Started
This is the tree of files we have initially:
├── 📁dist
│ ├── 📁img
│ ├── 📁js
| | ├──📁home
| | | └── home.js
| | └── 📁prakma
| | └── prakma.js
| └── home.html
└── 📁src
├── 📁components
└── 📁views
├── 📁home
| ├── 📁components
| | ├── welcome.style.sass
| | ├── welcome.code.js
| | └── welcome.component.jsx
| └── main.jsx
└── 📁home.app.jsx
📁 dist
Here is your compiled code, here you have a folder for every view you made in src. For make an another view, you just have to add something like this to your new html. Suppose that we have a view called Contact.
<body>
<div id="app"></div>
<script src="js/prakma/Prakma.js"></script>
<script src="js/contact/contact.js" type="module"></script>
</body>Look at this div: <div id="app"> here is where our view will be rendered.
Noticed that we have to call Prakma.js before our view.
📁 src
This is the cool part, we have 3 main folders here.
- components: Where all our general components will live.
- prakma: Just a folder to save my love, prakma.js.
- views : I'm going to explain this one...
| 📁 components
This folder is where you gonna save your global components of the project.
| 📁 views
This structure is suggested by me, doesn't mean that you have to use it, but is what I recommend.
We should have a folder for every view. Continuing with the example of Contact, let's suppose we have a Form component too. This should be our structure.
📁views
├── 📁contact
| └── 📁components
| ├── 📁form
| | ├── form.component.jsx
| | ├── form.code.js
| | └── form.style.sass
| ├── main.jsx
| |── main.code.js
| └── main.style.sass
└── contact.app.jsx
| 📁 components
Here we have to put every component will be use in our main script. I like to have a folder for every component and 3 files inside:
- .jsx (our component, a function returning jsx).
- .js (component logic, every function that our component jsx gonna need).
- .sas (styles).
|📁 components -> 📑 main.jsx
Like the name said, this is our main view file. This is where we assemble our components.
| 📑 contact.app.jsx
Every view must have an entry point, in this case, for our example will be contact.app.jsx.
import { Main } from './components/main'
const app = document.getElementById('app')
app.appendChild(Main())And you have to add the route of our new view in the entry property inside webpack.config.views.js.
module.exports = {
contact: view `contact`,
}➤ State
So cool! but where is the state? 🤔
We have a global state here, so, how can we manage it?
If we want to use it, we have to import the state first that is inside of:
📁libs
└── 📁prakma
└── prakma.js
import { setState, getState } from "../../../libs/prakma/prakma";Suppose we have a user we want to store, just do this:
setState({user})If we want to retrieve the object:
const user = getState().userOk, we have an internal state. Now, if I want to update the view when the state changes?
Well, here is a little different from React. Suppose we want to print the user info, for that we must write this type of component.
export const User = () => (
<div class="user">
<div>##user.name##</div>
<div>##user.age##</div>
<div>##user.occupation##</div>
</div>
)And our object in the state must be stored like this:
const user = {
name: "Leo",
age: 20,
occupation: "Engineer"
}
setState({user})We can modify the object every time we want:
setState({user: {age: 22}})At the moment we do that, our view will be updated.
Important note: This only works for objects, I'm working in print an array with his key and something like React, wait for that in the nexts months.
➤ Fetch / Request an API
With Prakma you can easily make a request. You can do it importing the request object:
import { Request } from '../../request/request'
const morty = await Request.GET('https://rickandmortyapi.com/api/character//2')That's the raw form, but you can do it better with a Prakma controller, but first you have to config the host in api/config.json.js:
export const config = {
server: 'https://rickandmortyapi.com/api/'
}Then, create a controller file in api/controller, in this case characterController.js:
import { PrakmaController } from "./controller";
class CharacterController extends PrakmaController{
constructor(){
super('character/')
}
async getMorty(){
return this.get('2')
}
}
export const characterController = new CharacterController() And in your main view, just import the object from the characterController and call the method getMorty():
import { characterController } from '../../../libs/api/controller/characterController'
//You can do this
characterController.getMorty().then(morty => {
//awesome code
})
//Or this
const morty = await characterController.getMorty()➤ DOM
Goodbye document.getElementById hi get
Prakma has a lot of methods than can help you to code by not taking care of the DOM methods, just use a help method inside libs/utils/dom.code. I'm working in the documentation for this.
➤ Package.json scripts
| Script name | Description |
|---|---|
| watch | Start watching our files to compile any change in dist/js/viewName/viewName.js |
| build | Compile and minify our files. They will be in build/js/viewName/viewName.js |
| Export scripts | |
| export-linux | This script just must be used to export the prakma files out of node_modules after installation. |
| export-windows | This script just must be used to export the prakma files out of node_modules after installation. |
➤ License
Licensed under MIT.
➤ FAQ
Where can I see examples?
You can see some here: PrakmaExamples
How can I get involved?
Create an issue or pull-request. You are also very welcome to throw me a message at @leoocast10.
How can I support you?
There are lot's of ways to support me! I would be so happy if you gave this repository a star, tweeted about it or told your friends about this little corner of the Internet
That's all for now folks.