Skip to content
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 0 additions & 110 deletions docs/javascript/ionic-core.md

This file was deleted.

48 changes: 39 additions & 9 deletions docs/javascript/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,71 @@ sidebar_label: Overview
<title>Ionic JavaScript Overview | JavaScript Version Support and Tooling</title>
<meta
name="description"
content="@ionic/javascript combines the Ionic experience with the tooling and APIs tailored to React developers. Learn more about version support and resources in our React Overview."
content="@ionic/core combines the Ionic experience with the tooling and APIs tailored to JavaScript Developers. Learn more about version support in our JavaScript Overview."
/>
</head>

import DocsCard from '@components/global/DocsCard';
import DocsCards from '@components/global/DocsCards';

`@ionic/javascript` offers a powerful way to build cross-platform applications using JavaScript, and it integrates seamlessly with modern tooling like Vite. This combination allows you to leverage your existing JavaScript knowledge and the efficiency of Vite to create high-quality, performant apps with Ionic's extensive UI library and native capabilities.
`@ionic/core` brings the full power of the Ionic Framework to JavaScript developers. It offers seamless integration with the JavaScript ecosystem, so you can build high-quality cross-platform apps using familiar JavaScript tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.

## JavaScript Version Support

Ionic JavaScript, when used with Vite, supports the latest versions of JavaScript, ensuring you can use modern language features in your projects.
Ionic Core supports the latest versions of JavaScript. For detailed information on supported JavaScript runtime versions, see the [Stencil Support Policy](https://stenciljs.com/docs/support-policy#javascript-runtime).

## JavaScript Tooling

Ionic JavaScript is designed to work hand-in-hand with the JavaScript CLI and popular tooling. When you choose Vite as your build tool, you gain access to its incredibly fast development server and optimized build process. You can continue to use your favorite JavaScript libraries for state management, testing, and more within this ecosystem.
Ionic Core works seamlessly with modern JavaScript tooling and build systems. You can use popular tools like Vite, Webpack, or Parcel to scaffold and build your apps. Ionic Core is designed to fit naturally into the JavaScript ecosystem, so you can use your favorite libraries for state management, testing, and more.

## Native Tooling

[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic JavaScript, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Core, enabling your apps to run natively on iOS, Android, and the web with a single codebase.

## Installation

Before you begin, make sure you have [Node.js](https://nodejs.org/) (which includes npm) installed on your machine.

```shell-session
$ npm create vite@latest myApp -- --template vanilla
$ npm create vite@latest my-app -- --template vanilla
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The app is named my-app here instead of myApp like the other frameworks because it will prompt for the name again if you don't use kebab case.


$ cd my-app
$ npm install && npm install @ionic/core
$ npm run dev
$ npm run dev
```

## Resources

<DocsCards>

<DocsCard header="Ionic Core" href="ionic-core" icon="/icons/guide-quickstart-icon.png">
<p>Quickly set-up your JavaScript application with Ionic Custom Components.</p>
<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
<p>Quickly set up your first Ionic JavaScript app and learn the basics of the framework and CLI.</p>
</DocsCard>

<DocsCard
header="JavaScript Documentation"
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
icon="/icons/logo-javascript-icon.png"
>
<p>
Learn more about JavaScript's core concepts, tools, and best practices from the official JavaScript documentation.
</p>
</DocsCard>

<DocsCard header="Navigation" href="/docs/api/router" icon="/icons/component-navigation-icon.png">
<p>Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.</p>
</DocsCard>

<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
<p>Explore Ionic's rich library of UI components for building beautiful apps.</p>
</DocsCard>

<DocsCard header="Theming" href="/docs/theming/basics" icon="/icons/guide-theming-icon.png">
<p>Learn how to customize the look and feel of your app with Ionic's powerful theming system.</p>
</DocsCard>

<DocsCard header="Capacitor Documentation" href="https://capacitorjs.com/docs/" icon="/icons/guide-capacitor-icon.png">
<p>Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.</p>
</DocsCard>

</DocsCards>
Loading