Code Monkey home page Code Monkey logo

arc2d-framework / toggle-switch-demo Goto Github PK

View Code? Open in Web Editor NEW
1.0 3.0 0.0 1.08 MB

This is an Arc2D Framework Toggle Switch WebComponent using Vanilla HTML/5, CSS3 & JavaScript. This example toggle-switch is a some-what of a replicate from a VueJS Toggle Switch Component Project on YouTube displaying the simplicity of using Arc2D vs other modern frameworks & applying W3C Standards with native WebComponent specs.

Home Page: https://toggleapp.arc2d.com/

License: MIT License

JavaScript 63.63% HTML 23.46% CSS 12.91%
javascript html5 webcomponents css3 javascript-framework mvc-framework mvc-architecture spa-architecture vanillajs w3c-specification

toggle-switch-demo's Introduction

At 10KB/1400 Lines of Code (LOC). Ultra efficient on mobile, desktop and web devices. Low memory (RAM) footprint and small kernel size puts Arc2D at a solid advantage.

Arc2D Framework 🦏

The Arc2D Framework - An Agnostic, W3C ES6/7 Vanilla JavaScript Compliant 2D World & GUI Engine used for building enterprise-class 2D, Web and Mobile Applications.

Zero Config Setup 📁

Getting started is easy, add 1 line to your HTML <head> tag to run the framework. Clone from this repository and follow the instructions to get started, visit https://www.arc2d.com/resources/doc for Arc2D's full documentation.

Multi-App SPA 🎇

Build multi-connected SPA apps in the same container that load and cache better than React, Angular & Vue.

Progressive Enhancement 🖌️

Stealthfully decorate & enhance existing/legacy pages with Arc, 1 component at a time without altering any existing HTML.

No Compilers 🚫

No Webpack, Grunt, Babel, Pre or Post Processors needed. Optional dependencies vary on the developer.

SDK Tools 🛠️

Arc comes equipped with its own internal build generator which will stitch and seam together multiple apps using the Prefab SDK tools.

Quartz Loop 🔁

Time sensitive simulation of physics, collision and AI with input, update and render sequence at an fixed update.

W3C Web Components ⚙️

Build true native WebComponents and assemble them on screen following W3C's recommendation.

Namespace Management 🗂️

Like Java packages, organize complex applications in a folder structure you choose that mirrors namespaces.

Data Binding 🖧

Data bind a DOMNode on screen to a class member variable in JavaScript for synchronization of values in both directions.

Agnostic HTML Templating 🌐

Plug-in your engine of choice (Mustache, Nunjucks, Handlebars & more). No vendor lock-in to technologies like React's JSX.

Native ES6/7 ❤️‍🔥

Native ES6/7 without builds. Runs live in NodeJS, Electrton and Cordova/Capacitor.

SPA Architecture ✨

Framework managed SPA architecture. Intuitive, seamless and transparent, no "Router" mechanisms or API's to fiddle with.

Auto-Nav (for SPA) ⚡️

The Auto-Nav feature handles navigation between multiple "views" or apps of an SPA using traditional links in dot notation mirroring namespace folder structure.

Tweens 💥

Tween or animate any object with HTML5 and JavaScript properties.

Layered Canvas 📊

Layer HTML, SVG and native Canvas together to build rich HUDs.

Component Cascade 🧮

Components auto-cascade their CSS in the right order automatically.

A* Path Finding 📐

2D path finder resolves best path to target on tilemaps with walls/obstacles in the way.

Agnostic Data Storage 🗄️

Mongo-like API with swappable data storage drivers for local and remote connectivity.

State Machine 🎮

Transition between modes (views) of gameplay with little effort. (Example: Splash to Menu ➡️ Level to Game ➡️ Menu to Level).

FPS Control 🚄

Frame dropping and interpolation for smooth animation during lags, lockstep or slow device spikes.

Collisions ☄️

SAT engine resolves collisions between any convex shapes on Canvas, HTML or SVG.

2D Physics 🌟

Box2D ready, stepped at a fixed physics update by Arcs quartz loop.

Heroku Ready 🚀

git push heroku master for deployment.

toggle-switch-demo's People

Contributors

jamesta696 avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.