Ionic Framework

repository·main·Indexed 13 days ago

https://github.com/ionic-team/ionic-framework

An open-source toolkit for building high-quality cross-platform native and Progressive Web Apps (PWAs) using Web Components and JavaScript. It provides a framework-agnostic core (@ionic/core) and specialized integrations for Angular (@ionic/angular), React (@ionic/react), and Vue (@ionic/vue), including dedicated routing packages like @ionic/react-router and @ionic/vue-router.

Tokens
65.8K
Snippets
215
Records
392
Agent score
100%

What's inside Ionic

  1. What is Ionic Framework?

    main

    Ionic Framework is an open source app development toolkit designed for building modern, fast, cross-platform native and Progressive Web Apps (PWAs) from a single codebase using JavaScript and Web technologies.

    Key architectural features:

    • Web Components Based: Built on the Web Components standard, providing high performance and usability.
    • Framework Support: Compatible with popular web frameworks including Angular, React, and Vue.
  2. Overview of Ionic Framework

    main

    Ionic is an open source app development toolkit used to build modern, fast, cross-platform native and Progressive Web Apps (PWAs) from a single codebase using JavaScript and Web technologies.

    Ionic is built on top of Web Components, which provides high performance and usability. It offers official support and integrations for the following web frameworks:

    • Angular
    • React
    • Vue
  3. Use @ionic/core Web Components

    main

    The @ionic/core package provides the underlying Web Components that serve as the reusable UI building blocks for the entire Ionic Framework. These components are framework-agnostic and can be used in several ways:

    1. Within Frontend Frameworks: Integrate them into applications built with React, Angular, or Vue using their respective Ionic integration packages (e.g., @ionic/react, @ionic/angular, or @ionic/vue).
    2. Standalone: Use them directly in a traditional web application using standard JavaScript in the browser.
    npm install @ionic/core
  4. Understand the Angular test app build structure

    main

    The Angular test applications in this repository are composed of multiple directories that are merged during the build process. This allows for shared logic across different Angular versions.

    • apps/: Contains partial applications for specific Angular versions (e.g., ng14). These contain version-specific package.json, angular.json, and code.
    • base/: The base application containing shared tests, application logic, and code that runs on every test app.
    • build/: The final output directory where apps and base are merged. Do not commit this directory to git.
    • build.sh: The script used to merge apps and base into the build directory.
    # Build a test app using apps/ng14 as a reference
    ./build.sh ng14