Introduction

Doge Framework - simple TypeScript framework for building small applications

Getting Started

Run the following commands in the console:

git clone https://github.com/simple242/doge-framework.git
cd doge-framework
npm install

NPM scripts:

npm run start        // launching the application in the browser
npm run build        // build application
npm run build:prod   // build application in production mode

Opportunities

• Typescript
• SASS
• SPA
• Component architecture of applications
• More than 20 custom tags
• Routing
• HTTP module
• DOM module
• and other...

Basic component structure

Simple component:

import {Component} from '@doge/models'

export class ComponentClassName implements Component {

  public getTemplate(): string {
    return template()
  }
}

const template = (props?: any): string => {

  return (`
    <doge-text/>Hello Doge</doge-text/>;
  `)
}

Component with params:

import {Component} from '@doge/models'

export class ComponentClassName implements Component {

  private static params = {}

  public static setParams(params?: any) {
    this.params = params
    return this
  }

  public getTemplate(): string {
    const params = ComponentClassName.params
    return template()
  }
}

const template = (props?: any): string => {

  return (`
    <doge-text>Hello Doge!</doge-text>
  `)
}

Render component method

Render Component in template:

const template = (`
  ${render(ComponentClassName)}
`)

Render Component in DOM Node:

render(ComponentClassName, 'selectorName')

Render Component with params:

render(ComponentClassName.setParams({params}), 'selectorName')

Routing

Link building (routing.ts):

import {updateRouting} from '@doge/modules'
import {Routing} from '@doge/models'

import {DocsComponent} from './docs/docs'
import {MainComponent} from './main/main'

const routing: Routing = {
  layout: 'main',
  routes: [
    {
      link: '/',
      component: MainComponent

    },
    {
      link: 'docs',
      component: DocsComponent
    }
  ]
}

updateRouting(routing)

Register Router Layout (app.ts):

import {Component} from '@doge/models'
import {routerLayout} from '@doge/modules'

import {MainComponent} from './main/main'

export class AppComponent implements Component {

  public getTemplate(): string {
    return template()
  }
}

const template = (props?: any): string => {
  return (`
    <!-- Router Layout -->
    ${routerLayout('main', MainComponent)}
  `)
}

Register Router Link(s) in template of MainComponent:

const template = (props?: any): string => {

  return (`
    ${router('docs', 'View Documentation')}
  `)
}

HTTP module

HTTP module is an abstraction over the popular Axios library. Basic methods:

• http.request(config)
• http.get(url[, config])
• http.delete(url[, config])
• http.head(url[, config])
• http.options(url[, config])
• http.post(url[, data[, config]])
• http.put(url[, data[, config]])
• http.patch(url[, data[, config]])

More details: Axios

DOM module

Provides a function $(selector?: string | Element) that extends the native JavaScript interface - Element. Example:

const selector: string | Element = '#someElement'
// OR
const selector: string | Element = document.querySelector('#someElement')

$(selector).html('<doge-text>Hello Doge!</doge-text>')

$().domLoad(callback)

Basic methods:

• all methods from native JavaScript interface Element
• $(selector).html = (node: string) => Element
• $(selector).clear = () => Element
• $(selector).on = (eventType: string, callback: any) => void
• $(selector).off = (eventType: string, callback: any) => void
• $().all = (selector: string) => Element[]
• $().domLoad = (callback: any) => void
• and other...

More details can be found with the module along the way doge-framework/src/doge-core/modules/dom.ts

Framework options

The framework settings are available along the way doge-framework/src/doge-core/options.ts

const options: Options = {
  enableDogeTags: true,
  enableRouting: true
}

Custom tags

Simple tags:

• <doge></doge> - main framework container
• <doge-text>some text</doge-text> - wrapper for text
• <doge-bold>some text</doge-bold> - wrapper for bold text
• <doge-italic>some text</doge-italic> - wrapper for italic text
• <doge-cross>some text</doge-cross> - wrapper for cross text
• <doge-little>some text</doge-little> - wrapper for little text
• <doge-heading>some text</doge-heading> - wrapper for title text
• <doge-top>some content</doge-top> - wrapper for header blocks
• <doge-content>some content</doge-content> - wrapper for main blocks
• <doge-bottom>some content</doge-bottom> - wrapper for bottom blocks
• <doge-navigation>some content</doge-navigation> - wrapper for navigation blocks
• <doge-box>some content</doge-box> - wrapper for simple blocks
• <doge-central>some content</doge-central> - wrapper for centered content
• <doge-list>doge items</doge-list> - list wrapper
• <doge-item>some text</doge-item> - list item
• and other...

Complex tags:

• <doge-link url="...">some text</doge-text> - analogue of the <a> tag, all attributes of the <a> tag are available, except for href, url is used instead
• <doge-pic url="..."></doge-pic> - analogue of the <img> tag, all attributes of the <img> tag are available, except for src, url is used instead
• <doge-btn>some text</doge-btn> - analogue of the <button> tag, all attributes of the <button> tag are available
• <doge-edit></doge-edit> - analogue of the <input> tag, all attributes of the <input> tag are available
• <doge-field>some text</doge-field> - analogue of the <textarea> tag, all attributes of the <textarea> tag are available and other...

LICENSE

License: GNU General Public License v3.0

IT IS FORBIDDEN TO CREATE FRAMEWORKS ON THE BASIS OF DOGE FRAMEWORK!