Modeling Data

API first and Smart Data has a wealth of Tools, that can be set up in minutes. Real Time Collaboration with Rich Content and linked UI.

Functional Requirements for Modern MVPs

Hooking to Event Based Action in Real Time with Webhooks
Comparing and Cleansing Data with Smart Editable Filters
Detecting Presence and Entitlement with Pub Sub
Secure Token/Authentication Tokens Management
Endemic 360 Content Curation with Meta Fields / Asset Management

Vue

Vue is a modular Template/Design System that includes Collection Based Data and Conditional Logic.

The benefit of this format, is that it can be used without a Build Tool. Use within “Gated” CRMs, Asset Management, Commerce Systems that would prevent role based access to the Configuration Global workflow. (CRMs, AEM, Salesforce, E Commerce)

The added ease of a full stack with Node/Server Side Dynamic Development makes this highly collaborative.

The logic is simple and follows the same development patterns found in Liquid, Nunjucks, GO and 11ty.

Looping and API integration in real time, is built naturally into the File Based System Stack that is easy to understand. Development for GraphQL/REST and dynamic data can be designed with UI/UX newest and best principles.

This blog is built with VUE based builder nested into a standard WordPress (replace any CRM, CMS, static build, with component based UI/UX development) environment. Utilize a separate Design compile that is GIT/CDN based so that the components can be “digitally designed” with non destructive development.

There are 2 APIs that can be used. One is called the Options API, the other newer one, was created to simplify conflicts and ability to pass data, in larger applications is called the Composition API. They are not mutually exclusive and older versions will continue to work.

Static Content Curation

Design User Journeys with linked API endpoints with Swagger conditions/logic. Utilize multiple endpoints and scale for Personalization/Deployment/Real Time and Publish workflows / DESIGN / without cost or breaking live / public facing systems.

Curate Data, Filters, Schema and Collaborate using an iterative UI based tool: export from Figma/XD with API modeling in place.

Relational Data with Live/Scheduled Synchronization. ie: Webflow API can sync to Amplify Data Modeling. Content Curation/Tree Shaking Tools can CI CL publish to GIT with Netlify/AWS synchronized CI CD for free. Data is ingested to Amplify eco system in real time with Entitlement, AI, Predictive, Filter defined with User Journey.

Schema Modeling Webflow with API automation

Amplify Data Modeling with API automation

Prebuilt Modules with Amplify $add

Vite

Modularly compile multiple endpoints, with Hot Module Reloading that can be published to live deployments across multiple Channels.

Smart Bundler with New Compiling

Before ES modules were available in browsers, developers had no native mechanism for authoring JavaScript in a modularized fashion. This is why we are all familiar with the concept of “bundling”: using tools that crawl, process and concatenate our source modules into files that can run in the browser.

Over time we have seen tools like webpack, Rollup and Parcel, which greatly improved the development experience for frontend developers.

resource: https://vitejs.dev/guide/why.html#the-problems

Vite Plugins

Roll Up

esbuild

Template Agnostic compiling.

Add to ANY Vanilla Stack. Gather, all of the files ending in: .css,.svelte,.vue, .html, .js, etc… and publish in live serving environment.

Hot Reloading guarantees real time updates without breaking site.

The advantage of this method, is, you can put VUE or Svelte into a “traditional” framework theme: Shopify, WordPress (this blog-Webflow), ERP. Compiling done externally can maintain legacy security and workflow. The build process is separate from the Content Creation and Design Process.

Or stack externally, for Native/App/Device workflows.

Svelte Kit is also bundled with Vite/Rollup.

Simple Expression
If you’ve used Custom Fields in WordPress, or metafields in Shopify, you will immediately understand this declarative operation pattern.

Use CDN Declaratively with any File Based Template Engine: WordPress, Laravel, GO, Drupal, Shopify, AEM, Salesforce etc.

Minify and tree shake before utilization with File System based workflow.

<div id="app">

<div class="uk-flex uk-flex-center">
  <div class="uk-card uk-card-default uk-card-body">
     <form class="uk-grid-match uk-child-width-expand@s uk-text-center" >
    <fieldset class="uk-fieldset">

        <legend class="uk-legend">Legend</legend>

        <div class="uk-margin">
            <input class="uk-input" type="text" placeholder="Input" >
           <p> {{email}} <p>
        </div>

        <div class="uk-margin">
            <select class="uk-select">
                <option> {{select}} </option>
                <option>Option 02</option>
            </select>
        </div>

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea"></textarea>
        </div>

        <div class="uk-margin uk-grid-large uk-child-width-auto uk-grid">
            <label><input class="uk-radio" type="radio" name="radio2" checked> A</label>
            <label><input class="uk-radio" type="radio" name="radio2"> B</label>
        </div>

        <div class="uk-margin uk-grid uk-child-width-auto uk-grid">
            <label><input class="uk-checkbox" type="checkbox" checked> A</label>
            <label><input class="uk-checkbox" type="checkbox"> B </label>
        </div>

        <div class="uk-margin">
            <input class="uk-range" type="range" value="3" min="0" max="10" step="0.1">
        </div>

    </fieldset>
   </form>
  </div>
    
</div>

    


</div>


<script>
 const App = {
 	data(){
  	return{
    email: "yoonsunlee150@gmail.com",
    select: "pink"
    }
  }
 }
 
 Vue.createApp(App).mount('#app')
</script>

Modifiers and Events

Data

Data is tied to modularly defined Apps or component, that can be added, animated, hide/shown, mounted to Customizable Templates. Data can be built within the “scoped” component and or “hooked” to a live Feed/GraphQL, within an External Secure/Scheduled API feed.
Computed

Logic and “Calculations” can be applied to the “expressions” and linked/data
Events

Simple Actions can be applied to HTML like objects with simple v-on:click, v-on:keyup.

Modifiers can efficiently execute functions that would have to be done programmatically.

<form v-on:submit.prevent></form>
v-on:submit.prevent will prevent default form from submiting

Event can be added to any semantic element: Button, Div, Accordion.
Expression {{ }}

Utilize expression brackets to dynamically render data from feed, or scoped Schema Declarations.

Functions and State

State

Stored conditional “timeline” frame. This frame can be an endpoint, or referenced. Think of an animation frame. This can also be used with: to/from UI animation reference.

Conditionally save your data, based on session, and role. Excellent security and privacy tool for Compliance dependent UX.
Mutation

Change in information and transfer to linked data stores
Action

Event enabled execution of logic and parameters
Modules

Reusable groupings of template/data/methods

Vue Formulate

Link to Vue 2 Formulate Form

Yoonsun Lee

Portfolio