Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Onsen UI Simple Todo App - Onsen-ui Typing CST Test
Onsen UI Simple Todo App — Onsen-ui Code
Demonstrates a simple Onsen UI app with a Todo list, adding tasks, and displaying them using Onsen UI components.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="center">Todo App</div>
</ons-toolbar>
<ons-input id="todoInput" placeholder="New Todo"></ons-input>
<ons-button onclick="addTodo()">Add</ons-button>
<ons-list id="todoList"></ons-list>
</ons-page>
<script>
const todos = [];
function addTodo() {
const input = document.getElementById('todoInput');
if(input.value.trim()) {
todos.push(input.value.trim());
input.value = '';
renderTodos();
}
}
function renderTodos() {
const list = document.getElementById('todoList');
list.innerHTML = '';
todos.forEach(todo => {
const item = document.createElement('ons-list-item');
item.textContent = todo;
list.appendChild(item);
});
}
</script>
</body>
</html>Onsen-ui Language Guide
Onsen UI is an open-source framework for building hybrid and mobile web apps using HTML5, CSS, and JavaScript. It provides ready-to-use UI components optimized for iOS and Android, supporting frameworks like Angular, React, and Vue.
Primary Use Cases
- ▸Hybrid mobile apps for iOS and Android
- ▸Progressive Web Apps (PWAs)
- ▸Rapid prototyping of mobile interfaces
- ▸Apps needing consistent cross-platform UI
- ▸Integration with Angular, React, or Vue frameworks
Notable Features
- ▸Platform-aware UI components that adapt to iOS and Android styles
- ▸Framework-agnostic core with bindings for Angular, React, and Vue
- ▸Built-in animations and touch gestures
- ▸Lightweight and optimized for performance
- ▸Supports Cordova/Capacitor for native device access
Origin & Creator
Developed by Monaca (Asial Corporation) in 2013, Onsen UI was created to simplify hybrid mobile app development using web technologies while providing native-like UI components.
Industrial Note
Best suited for hybrid apps and progressive web apps requiring native-style UI with minimal platform-specific customization.
Quick Explain
- ▸Onsen UI offers mobile-optimized UI components that adapt to platform-specific design guidelines.
- ▸It works with popular frameworks including Angular, React, and Vue, or with plain JavaScript.
- ▸Ideal for developers building hybrid apps with a single codebase for multiple mobile platforms.
Core Features
- ▸Prebuilt UI components: buttons, lists, tabs, dialogs, and more
- ▸Flexible layout system using CSS and Grid/Flexbox
- ▸Page navigation with push/pop transitions
- ▸Automatic platform styling for iOS and Android
- ▸Integration with Cordova/Capacitor plugins
Learning Path
- ▸Learn HTML, CSS, and JavaScript basics
- ▸Understand framework of choice (React, Angular, Vue)
- ▸Learn Onsen UI core components
- ▸Build simple hybrid app
- ▸Deploy to browser and mobile devices
Practical Examples
- ▸Hybrid e-commerce apps
- ▸Mobile dashboards for business apps
- ▸Progressive web apps with native-like UI
- ▸Internal company tools deployed on mobile
- ▸Prototype apps for startups targeting multiple platforms
Comparisons
- ▸Onsen UI vs React Native: Onsen is hybrid/web-based, React Native is fully native
- ▸Onsen UI vs Flutter: Onsen uses web technologies, Flutter uses Dart and native rendering
- ▸Onsen UI vs Ionic: Both hybrid, Onsen UI focuses on minimalism and platform-adaptive UI
- ▸Onsen UI emphasizes simplicity and quick prototyping
- ▸Performance slightly lower than fully native solutions
Strengths
- ▸Single codebase for multiple platforms
- ▸Native-like UI without writing native code
- ▸Works with major JS frameworks or plain JS
- ▸Lightweight and fast for hybrid apps
- ▸Good documentation and example projects
Limitations
- ▸Less performant than fully native apps for heavy UI tasks
- ▸Some complex native features require Cordova/Capacitor plugins
- ▸Smaller community compared to React Native or Flutter
- ▸Limited ecosystem of third-party components
- ▸Debugging hybrid apps may be trickier than native apps
When NOT to Use
- ▸Apps requiring intensive native graphics or animations
- ▸Projects needing deep integration with native OS APIs
- ▸Teams not comfortable with web technologies
- ▸Apps with very high-performance requirements
- ▸Complex multi-threaded mobile apps
Cheat Sheet
- ▸`<ons-page>` - page container
- ▸`<ons-navigator>` - page navigation
- ▸`<ons-button>` - platform-adaptive button
- ▸`<ons-list>` / `<ons-list-item>` - list components
- ▸`ons.platform.isAndroid()` / `isIOS()` - platform detection
FAQ
- ▸Does Onsen UI support React/Angular/Vue?
- ▸Yes, via official bindings.
- ▸Can I use Onsen UI for PWAs?
- ▸Yes, it's optimized for mobile web apps.
- ▸Is it suitable for production?
- ▸Yes, especially for hybrid apps needing native-like UI.
- ▸Does it require Cordova?
- ▸Not for web apps, but needed for native device access.
- ▸Are there built-in animations?
- ▸Yes, platform-optimized transitions and gestures are included.
30-Day Skill Plan
- ▸Week 1: Onsen UI core components and pages
- ▸Week 2: Navigation and routing
- ▸Week 3: Integrate with framework (React/Angular/Vue)
- ▸Week 4: Add Cordova/Capacitor plugins
- ▸Week 5: Test, optimize, and deploy hybrid app
Final Summary
- ▸Onsen UI is a hybrid/mobile web framework for iOS and Android.
- ▸It provides ready-to-use, platform-adaptive UI components.
- ▸Supports Angular, React, Vue, or plain JavaScript.
- ▸Ideal for hybrid apps needing a single codebase.
- ▸Integrates with Cordova/Capacitor for native features.
Project Structure
- ▸src/ - main source code including pages and components
- ▸index.html - entry point for web/hybrid apps
- ▸package.json - dependencies and scripts
- ▸node_modules/ - installed packages
- ▸www/ - Cordova/Capacitor output for mobile deployment
Monetization
- ▸Publish consumer apps on app stores
- ▸Enterprise apps with subscription/licensing
- ▸Hybrid apps with in-app purchases
- ▸Consulting for hybrid app development
- ▸Rapid prototyping with Onsen UI
Productivity Tips
- ▸Reuse UI components across pages
- ▸Test on multiple platforms often
- ▸Use framework state management efficiently
- ▸Leverage built-in animations and gestures
- ▸Document platform-specific behavior
Basic Concepts
- ▸Pages are defined using `<ons-page>` elements
- ▸Navigation is handled via `<ons-navigator>` or router integration
- ▸Use `<ons-button>`, `<ons-list>`, `<ons-tabbar>` for standard UI components
- ▸Platform-specific styling handled automatically
- ▸Components are framework-agnostic or have framework bindings