https://github.com/threepointone/rakt

fast websites, by default
https://github.com/threepointone/rakt

Last synced: about 2 months ago
JSON representation

fast websites, by default

• Host: GitHub
• URL: https://github.com/threepointone/rakt
• Owner: threepointone
• Created: 2017-02-10T20:51:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-19T12:01:54.000Z (over 7 years ago)
• Last Synced: 2024-05-02T05:41:26.904Z (5 months ago)
• Language: JavaScript
• Size: 112 KB
• Stars: 291
• Watchers: 25
• Forks: 12
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
rakt

---

[work in progress. come back when it's done!]

a framework, without any framework. for react/dialects. in a box.

usage 

--- 

`npm install rakt -g`

quick start

---

make a script, say `index.js`

```jsx

export default App = () => 

  
hello world

```


then run 

```

$ rakt index.js   

```

the big idea 

---

one addition to [react-router's](http://react-router.now.sh/) `` api

```diff

import { Route } from 'react-router'

- import User from './user.js'

```

behind the scenes, rakt handles code splitting + SSR + resource loading

optionally, use `render`/`children` as you normally would

```jsx

 Module ? 

     : 

    loading... )}

/>

``` 

defer

---

you can prevent ssr for a `` with the `defer` attribute. 

great for starting apps faster, and offloading some work to the browser. 

rakt manages efficiently preloading code and/or data for the same.  

```jsx

```

todo - ``

leaf

---

[todo]

preserve

---

[todo]

data fetching

---

rakt takes data-fetching to the next level, by letting you 

colocate *actual* server side code alongside your component

```jsx

import { initial } from 'rakt'

@initial(({ req, done }) => {    

  let db = require('mongo')(3111)

  db.get('users', req.params.id, done)  

  // gets removed from client side bundle(!)

})

export default class User {

  render(){

    return 


      {this.props.data || 'loading data'}

    
  

  }  

}


// augment this with your own solutions - relay, redux, etc

```

rakt will take care of efficiently fetching, hydration(for ssr), caching, etc

- todo - `@get`, `@post`, `@put`, `@del`

- todo - `@socket`, `@sse`, `@memory`, etc 

- todo - cache keys / idents 

css

---

[todo]

rakt lets you write 'inline' css via [glamor](https://github.com/threepointone/glamor/blob/master/docs/createElement.md)

```jsx



  bloody valentine



```


prpl ootb

---

[todo]

rakt apps should conform to the prpl pattern without any extra work

cli

---

[todo]

`rakt  <options>`

`rakt build <script> path/to/folder`

options 

- `ssr` - server side rendering - default `true`

- `splits` - code splits - default `true`

- `production` - production mode - default `false`

- `css` - 'inline' css - default `true`

integrating with other apps/frameworks

---

[todo]

you can take pieces from rakt and use them in your own app sans the rakt stack. 

- babel/webpack pipeline

- `<Layout/>`

- api server 

- route-aware data fetcher 

implementation

---

[todo]

constraints

---

- `module` must be a string literal

- when using `module`, `path` must be a string literal

- *might* overfetch data for some edge cases 

todo - 

- prefetch links

- websockets?

- work with aliased modules 

- sw-precache, etc

- use named exports (incl data fetches)

- manifest and such

- progressive css

- leaf nodes / wc-like behavior 

- cache keys for @initial

- react-native? 

- in-house `<Route/>`, `<Link/>`, etc 

- optimistic updates

- rhl

- fonts and icons and svgs and images and such