App Connect Introduction

Intro

Next generation front-end framework for reactive, data-driven web sites and apps

App Connect is a high performance front-end framework just as powerful as React, Angular and VueJS. App Connect however is much easier to use due to it’s custom component structure and HTML5 attribute bindings. It comes with many custom components like: slideshows, galleries, dynamic charts, maps, animations and many more, which you can insert on your page and customize as you like.

App Connect is fully integrated in Wappler and offers fully visual development for the integrated front-end framework. It contains a Visual Layout panel, Data Bindings, Components Library and Component Inspectors for their Properties, Events and Dynamic Attribute bindings – all looking great and a mighty clear UI. No coding required!

Main Features

Visual Layout Designer

Offers clear overview of your app structure and its components hierarchy. It also offers full drag and drop support so you can rearrange the structure.

Property Inspectors

Every component has its own custom inspector for all its properties and bindings. Rich UI controls are used for all different type of entries and input options.

Extensive Data Bindings

Add any data directly in your content, populate mighty fast repeat regions, dynamic CSS styling, generate content or toggle areas fully dynamic and data dependent.

Dynamic Attributes Bindings

Give any standard HTML tag or custom component attribute a dynamic value or expression. Values are dynamically assigned when data is available.

Dynamic Events

Use extended event bindings not for just HTML elements but also for the custom components.

Design View Visual Development

Any changes in the visual designer, its component inspectors and data bindings are directly visible in Wappler Design View – so it makes development of complicated data-driven sites and apps a real visual pleasure.

Ultra-Light And Mighty Fast

Just 15kb gzipped! No jQuery dependency! Performance compares to industry standard ReactJS, Vue.js and AngularJS frameworks

Components

Data Components

Extensive data-related components which allow you to use any data source: Database, JSON Data, External APIs and more

Image Galleries, Slideshows and Animations

Responsive design components like: Masonry Grid, Image Slideshow, Video Player, Lightbox and more

Cookies, Sessions and Local Storage

Empower HTML5 Web Storage for your app state, user data and caching

E-commerce

Use the available Stripe elements to build powerful e-commerce solutions

Under the Hood

App Connect is a compact, but powerful component based, front-end framework. It offers dynamic data and attributes binding, repeat regions and ultra-fast data rendering. Its visual tools make it really easy to use and the code it produces runs on all modern browsers.
Here are a few examples showing what is App Connect capable of and what’s under the hood

Computed Properties

Any HTML attributes can be bound to a dynamic value or expression with the so called Dynamic Attributes.
Just prefix attribute name with dmx-bind.

<img src="spin.gif" dmx-bind:src="imagePath">

Form Input Handling

Form elements can be easily bound with data sources. Custom controls for form inputs, dynamic dropdowns with item population and textarea with dynamic bindings are already built-in.

<input name="price" dmx-bind:value="price">

Conditional Rendering

Toggle the visibility of areas conditionally or perform a conditional rendering. Just add the dynamic attribute dmx-show or dmx-hide with the condition as value.

<div dmx-show="someData.isAvalable">

Class And Style Binding

Add or remove fully conditional classes and inline styles based on dynamic expressions. Use the dynamic attribute dmx-class for class toggling or dmx-style for inline styles.

<div dmx-class:active="someCondition == true">

List Rendering

Render repeat regions easily by just specifying the dmx-bind:repeat attribute. You can repeat any children of elements or the elements self. Extensive List Animations are also available for optimal UX.

<ul dmx-bind:repeat="propertiesForm.data.list">
  <li>{{item}}</li>
</ul>

Event Handling

Bind easily any HTML or component events with the any component actions. Just prefix event name with dmx-on and add the action that needs to be executed as value.

<input dmx-on:change="someComponent.refresh()">
17 Likes