DEV Community: Tobi

Dativejs animation

Tobi — Thu, 31 Mar 2022 03:46:38 +0000

Animations in dativejs is awesome
And it uses the Web Animation Api

So it's easy to create custom animations

Let's Start Cooking

import Dative from 'dativejs';

export let Anime = Dative.extend({
   ...,
   animate: {
      rotate({ animate,delay,duration }){
         animate([ 
            { rotate: '0deg' },
            { rotate: '360deg' },
         ],{
            delay,
            duration,
            easing
         })
      } 
   },
   template: `
     <h1 @rotate="3000, 5">I'm Rotating</h1>
   `
})

The animation directive animate:<animate-name>="duration, delay" also has the short way @<animate-name>="duration, delay"

This is how the animation is been used

  template: `
     <h1 @rotate="3000, 5">I'm Rotating</h1>
   `

Thanks For Reading

Please me on Twitter

Creating a plugin in Dative v2-alpha

Tobi — Sat, 19 Mar 2022 07:22:51 +0000

Creating a plugin in dative v2-alpha is different from the other versions

Since the Dative.use(plugin) has deprecated

So We introduced a new way which also helps more

Let's Start Cooking :)

export let Profile = Dative.extend({
  ...,
  use: [function({ instance, proto, Dative }: { instance: Dative, proto: Dative, Dative: typeof Dative }){
    // Dative=> the Dative constructor
    // instance=> the current instance of your application
   // proto=> the Dative prototype
  }]
})

Let's Create A Plugin

// src/plugins/my-plugin.js
export let MyPlugin = function({ instance, proto, Dative }){
// 1. Let's make a global property
Dative.defineProperty('appName',function(){
  return 'Dative News'
})
// Now You Can Get the options of the instance
console.log(instance.options.me)
}

How do we use it ??

...
import { MyPlugin } from './plugins/my-plugin'


export let Profile = Dative.extend({
  ...,
  use: [MyPlugin],
  // we can now use the option we defined
  me: "Holla" //=> Holla
})

Thanks For Reading

If You Have any Question About Dative

Feel free to ask me on twitter

@debug DativeJS

Tobi — Sat, 12 Mar 2022 14:13:07 +0000

The @debug expression in Dativejs is used to log out an object to the devtool and it also adds the debugger keyword

Usage

<div>
 {{@debug lists}}
</div>

data: ()=>({
    lists: {
      name: "@dativejs/helpers",
      type: "Tools"
   }  
})

NOTE This Will Add Backdrop to your Browser its not from dativejs but your browser. So Use in a Valid Case

Thanks For Reading

My Twitter
My Github

DativeJs {{#each}} block

Tobi — Sat, 12 Mar 2022 11:52:20 +0000

The each block in dativejs is used to iterate array|object

In the Formal Versions Of Dativejs

It Was Hard to Achieve This

So We Made this to be a betterment for that :)

Usage

<div>
  {{#each foods as food}}
      <li>{{food}}</li>
  {{/each}}
</div>

each/each.dative.js

import Template from './each/each.dative.html'
export let Each = Dative.extend({
   el: "#app",
   data(){
      return {
        foods: ["Rice","Noodles","Vegetables"]
      };
   },
   template: Template
})

You Can Also Catch the Index number of each array

<div>
  {{#each foods as i,food}}
      <li>{{i}}:{{food}}</li>
  {{/each}}
</div>

NOTE When Using the #each block with object the i in the #each block will not be index again we are working on that

Don't Do This You'll Get A Messy Error

<div>
  {{#each foods as food}}
      <li>Type: {{food.type}}</li>
      <li>Name: {{food.name}}</li>
  {{/each}}
</div>

each/each.dative.js

import Template from './each/each.dative.html'
export let Each = Dative.extend({
   el: "#app",
   data(){
      return {
        foods: {
           type: "Fruit",
           name: "Guava"
        }
      };
   },
   template: Template
})

Do This

<div>
  <!-- `i` will give you the key here not the index -->
  {{#each foods as i,food}}
      <li>{{i}}:{{food}}</li>
  {{/each}}
</div>

Thanks For Reading

You Want to Test DativeJs Online

You Can Hit the Follow button on twitter i really appreciate
My Twitter Profile

Thanks Once Again For Reading and Supporting Me

Dativejs {{#if}} block

Tobi — Thu, 10 Mar 2022 12:50:14 +0000

When building a project with dativejs you might want to conditionally render a tag / anything

Then 🤯 You might be like

🤔 How can I achieve that

Don't worry dativejs has it

That's why we introduced the {{#if}} block

Usage

{{#if isOpen}}
  <h1>It's open</h1>
{{/if}}

What if you also need to show some stuffs if the condition value is false

There is also an {{:else}} and {{:else if}}

They work just same as the JavaScript if,else,else if

Usage

{{#if isOpened}}
  <h1>😇</h1>
{{:else}}
  <h1>😔</h1>
{{/if}}

You can add the {{:else if}} also

{{#if isOpened}}
  <h1>😇</h1>
{{:else if isHated}}
  <h1>😐</h1>
{{:else}}
  <h1>😔</h1>
{{/if}}

Thanks for reading

Next tutorial will be on the {{#each}} block

Dativejs Tutorial - Creating a Dative instance

Tobi — Sun, 06 Mar 2022 13:32:00 +0000

Creating A Dativejs Instance

In Dative 2-alpha there are two ways of creating an instance for your application

new Dative
defineApp

The new Dative is the normal way we know in the v1-v2 but the defineApp is the new way which also uses the same options api like new Dative but with the defineApp you don't need to use the new keyword

Let's start cooking 🥳🍜

defineApp<T extends DativeOptions>(options: T): Dative

import { defineApp } from 'dativejs'

let app = defineApp({
   data: ()=>({
      message: "Holla"
   }),
   template: `
     <div>
       <h1>{{message}}</h1>
     </div>
   `
})

Notice That there's not `app.render()` again like the v1-v2

The v2-alpha render automatically when there's an el options or when you use the app.mount(el: string)

New options has been added to the instance
Check API docs

Next blog will be on the {{#if}} block

Thanks for reading ❤️❤️

Dative.JS Tutorial

Tobi — Thu, 03 Mar 2022 11:37:37 +0000

Introduction

DativeJs Is A Mordern Ui Javascript FrameWork

How Do I Use Dative.Js

First

Scaffold A Project

$ npx degit dativeJs/template my-app

# Install All The Dependencies
$ npm i

That Command Should Create a template with Dative.JS There

File Structure Should Be Considered While Creating a New Component

my-app
|- src
   |- your-component
      |- your-component.dative.html // The Template
      |- your-component.dative.js // The Script

  // your-component.dative.js
  import Dative from 'dativejs';
  import template from './your-component.dative.html';

  export let YourComponent = Dative.extend({
     template,
     // Other Options Goes Here
  })

Then You Can Import it in the `src/index.js`

import { YourComponent } from './your-component/your-component.dative'

...

app.attach([
  ...,
  new YourComponent({
     el: '#your-component-id'
  })
])

You Set

Check DativeJS Docs for more details

Thanks For Reading :)

What's New In DativeJs

Tobi — Wed, 02 Mar 2022 21:04:15 +0000

What's New in DativeJs

DativeJs has released a new version recently v2-alpha.1

What does it bring

DativeJs has added new feautures like

animations
helpers

Some global methods has been deprecated like

Dative.importstyle(href: string) use the normal <link> now
Dative.use(plugin, ...opts) use app.use

Some options has been deprecated,changed

update has been deprecated
mounted has been changed to onmounted
created has been changed to oncreated

New Options has added

animate for defining animations
use for installing a plugin
property for creating a local property
attach for attaching a Dative Component/Instance to another Dative Instance

New Global Methods added

defineApp This is a shorter way of creating a dative instance. No Need For new keyword with the defineApp methods

import { defineApp } from 'dativejs'


var app = defineApp({
   el: "#app" // or a css selector or a tag 
})

defineProperty It's used to create property in DativeJs see defineProperty in DativeJs Docs

import { defineProperty } from 'dativejs'


defineProperty('foo',()=>{
  return 'bar' 
})

extend It's used to extend Dative Instance in DativeJs see extend in DativeJs Docs

import Dative from 'dativejs'


export let SideBar = Dative.extend({
   // same options with the dative option but no el options
})

// index.js

import { SideBar } from './sidebar.dative.js'


new SideBar({
   el: "#sidebar"
})

The new way of installing a plugin in Dative.Js is quiet more easy

See Plugin In DativeJs Docs

See Migration Path

DativeJs version 2 has been released

Tobi — Fri, 27 Aug 2021 12:17:52 +0000

DativeJs has released it's version 2

The version 2 has a directives options now

https://dativejs.js.org

DativeJs

Tobi — Fri, 06 Aug 2021 18:06:04 +0000

DativeJs is a micro UI JavaScript framework.

It's an alternative to vuejs

Check out DativeJs

https://dativejs.github.io

DEV Community: Tobi

Dativejs animation

This is how the animation is been used

Thanks For Reading

Creating a plugin in Dative v2-alpha

Creating a plugin in dative v2-alpha is different from the other versions

Let's Start Cooking :)

Let's Create A Plugin

How do we use it ??

Thanks For Reading

@debug DativeJS

Usage

Thanks For Reading

DativeJs {{#each}} block

Usage

Don't Do This You'll Get A Messy Error

Do This

Thanks For Reading

You Want to Test DativeJs Online

Thanks Once Again For Reading and Supporting Me

Dativejs {{#if}} block

Usage

Usage

Dativejs Tutorial - Creating a Dative instance

Creating A Dativejs Instance

Let's start cooking 🥳🍜

Notice That there's not app.render() again like the v1-v2

Dative.JS Tutorial

Introduction

How Do I Use Dative.Js

First

Then You Can Import it in the src/index.js

What's New In DativeJs

What's New in DativeJs

See Migration Path

DativeJs version 2 has been released

DativeJs

Notice That there's not `app.render()` again like the v1-v2

Then You Can Import it in the `src/index.js`