App Framework v3

App Framework v3 was never completed. The latest stable version is App Framework v1.

iOS and Android Apps with HTML & JavaScript. App Framework combines great pieces of open source code to support your whole workflow with useful scripts and your App with powerful plugins. With App Framework, you can spend your time for your next amazing App and not for the tricky stuff around - free and open source!

Features

Core

• Beautiful User Interface with native iOS and Material Design elements and transitions, based on Framework7
• Flexible Routing for pages, tabs, modals and panels with dynamic routing support, realized with Framework7-Vue
• Multi-language Support with language files and automatic completeness check according the default language
• Offline Capability to use the app even without any network connection
• One Code Base for all devices with HTML, CSS and JavaScript, realized with Capacitor, supporting ES2015
• Single File Components for powerful but easy to maintain apps, made with Vue.js and Framework7-Vue
• Project Folder Creation, lightweight and well-organized, ready to publish on GitHub

Scripts

• Live Development Server with hot module replacement, powered by Parcel
• Test on your own Device or in any iOS or Android emulator, supported by Capacitor, Xcode and Android Studio
• Test Framework for code correctness and standard conformity with ESLint and for unit tests with Jest
• Optimized Build Process for good scores at Google Lighthouse, realized with Parcel
• Icon Generation for favicon, touch icons and splash screens, out of a single image file with Jimp
• Easy Deployment without downtime to Apple App Store, Google Play Store, Firebase Hosting or any FTP server

Plugins

• Native Hardware API Plugins for iOS and Android devices, realized with Capacitor
• Comprehensive Icon Fonts like FontAwesome, Framework7 Icons, Ion and Material Design Icons out of the box
• Phone Frame around your application on big screens, so you can offer desktop access with charm
• State Restoration for the history per view, tabs, scroll positions, focus, panels, modals and form inputs
• Global Data Object to save user data across several application restarts easily
• Vuex Integration to use the official Vue.js state management library
• Preloading for images, fonts and JavaScript files
• Firebase Integration for several services like Authentication, Realtime Database, Firestore and Cloud Storage

Demo App

The Apple App Store app may be outdated because Apple blocks demo apps from their store now.

       

Documentation

Quick Start

1. Run mkdir my-app to create a new project folder
2. Run cd my-app to open the project folder
3. Run echo {} > package.json to create an empty json file
4. Run npm install app-framework for installation
5. Run npx app dev to start the local development server

Workflow

• Setup your development environment
• Start and configure your app project
• Develop your application
  • Modify the app component
  • Modify page components and the routing
  • Use CSS style sheets
  • Use image files
  • Use Node packages
  • Use hardware APIs
• Test your application
• Deploy your application
  • to any FTP server
  • to Firebase Hosting
  • to the Apple App Store
  • to the Android Play Store

CLI Reference

• Run npx app test to run all configured tests
• Run npx app test eslint to run the ESLint test
• Run npx app test jest to run the Jest tests
• Run npx app dev to open the application on the development server
• Run npx app build to build the application according the configuration
• Run npx app deploy ftp to deploy the PWA to any FTP server
• Run npx app deploy firebase to deploy the PWA to Firebase Hosting