# g1 `g1` is a micro-framework collection that makes it easy to write front-end data applications. It's a humble alternative to [Vue.js](https://vuejs.org/), [AngularJS](https://angularjs.org/) and [React](https://reactjs.org/). It not a framework -- more a collection of tools that work together. Sort of like UNIX. If you need a library to build data applications without a learning curve and low overhead, g1 may be for you. ## Installation You can add g1 *and its dependencies* with a single script tag: ```html ``` or install it using: ```bash yarn install jquery lodash g1 # ... OR ... npm install jquery lodash g1 ``` ... and add this to your HTML file: ```html ``` ## Render templates You can create dynamic content from data using templates. To create a template: 1. Write HTML inside ``. 2. Embed JavaScript inside `<% .. %>` in the template 3. Call [$(el).template(data)](template.md). This renders your template with your data. For example: ```html ``` Templates use [lodash](https://lodash.com/docs/#template), which is plain HTML and JavaScript. You don't need to learn a new template language. - Anything inside `<% ... %>` is executed as Javascript. - Anything inside `<%= ... %>` is evaluated and displayed. - To re-render the template, run `.template()` again with different data. TODO: show a full-blown example of this. ## URL-based state Apps shows different content based on what the user requests. A good way to capture this is to store the requests in the URL. This lets the user bookmark the page and share the URL. This URL represents the **state** of the app. For example, `/view=sales&year=2019` may show the sales in year 2019. ### Parse URLs To parse a URL, use [g1.url.parse](url.md): ```js var url = g1.url.parse(location.href) url.searchKey == {"view": "sales", "year": "2019"} ``` This can affect what template to render, and what data to render. For example: ```html ``` When the URL is `?view=sales&year=2019`, it renders "Sales was 260 in 2019." When the URL is `?view=profit&year=2018`, it renders "Profit was 50 in 2018." TODO: show a full-blown example of this. ### Change URL state To change the state, we change the query. For example: - `?view=sales&year=2018` changes year to become... - `?view=sales&year=2019` We can do this using ``. But we usually change *only some of the keys* at a time (e.g. change year to 2019 *without* changing `view`.) [$().urlfilter()](urlfilter.md) makes this easier. `` changes *just the year* to 2019, and keeps other keys constant. ```html

``` TODO: show a full-blown example of this. ## Single page apps Changing the URL reloads the page. To build single page apps that don't reload, you can store the state in the location hash, like `/#?view=sales&year=2019`. To make [$().urlfilter()](urlfilter.md) update the hash (instead of the query), use `$('body').urlfilter({target: '#'})`. To listen to hash change events, use [$(window).urlchange()](urlchange.md). For example: ```js $(window) .on('#?view', function (e, view) { console.log('view is', view) }) .on('#?year', function (e, year) { console.log('year is', year) }) .on('#', function (e, url) { console.log('hash is', url) }) ``` TODO: show a full-blown example of this. ### Virtual DOM Normally, re-rendering a template deletes the content and re-creates the DOM elements. But if you use `