Framework7- build ios, android styled apps with JavaScript

For a JavaScript developer it is a very tough task to build mobile application these days, not only because handling the UI is an exhaustive task but also because in most of the frameworks, you are quite limited when it comes to applying what you already know.

check out their demo too!

framework 7 presents itself in a sweet spot where it gives you tools to create your own user interface either with iOS style or with Android material you design it provides excellent UI components, for overall development of your application.

framework 7 is based on capacitor which is easy to work with and provides a lot of API to handle as well I highly recommended to check it out!

Installation

npm i framework7-cli -g
framework7 create --ui

simply navigate ahead and choose your working stack!

if you don’t want to use framework 7 and would settle on less functionality you can also use konsta UI which offers almost the same experience!

Components

Dialog

<script>
  let dialogOpened = false;

  function openDialog() {
    dialogOpened = true;
  }

  function closeDialog() {
    dialogOpened = false;
  }
</script>

<main>
  <button on:click={openDialog}>Open Dialog</button>

  {#if dialogOpened}
    <div class="dialog">
      <div class="dialog-content">
        <h2>This is a Svelte dialog</h2>
        <button on:click={closeDialog}>Close</button>
      </div>
    </div>
  {/if}
</main>

Action Sheet

<script>
  let actionSheetOpened = false;

  function openActionSheet() {
    actionSheetOpened = true;
  }

  function closeActionSheet() {
    actionSheetOpened = false;
  }
</script>

<main>
  <button on:click={openActionSheet}>Open Action Sheet</button>

  {#if actionSheetOpened}
    <div class="action-sheet">
      <div class="action-sheet-buttons">
        <button on:click={closeActionSheet}>Cancel</button>
        <button on:click={closeActionSheet}>Button 1</button>
        <button on:click={closeActionSheet}>Button 2</button>
      </div>
    </div>
  {/if}
</main>

Accordion

<script>
  let accordionOpened = false;

  function toggleAccordion() {
    accordionOpened = !accordionOpened;
  }
</script>

<main>
  <button on:click={toggleAccordion}>Toggle Accordion</button>

  {#if accordionOpened}
    <div class="accordion">
      <div class="accordion-header" on:click={toggleAccordion}>
        <span>Accordion Header</span>
      </div>
      <div class="accordion-content">
        <p>This is the accordion content</p>
      </div>
    </div>
  {/if}
</main>

check out the full list here!

Building mobile apps can be a daunting task for JavaScript developers. The challenges of handling intricate UI designs and the limitations posed by many frameworks can be overwhelming.

However, Framework7 and Konsta UI come to the rescue, offering some excellent solutions.Framework7 finds the sweet spot by providing tools to craft user interfaces in iOS or Android styles. Its robust components simplify the overall app development journey. The simplicity of getting started, as seen in the provided CLI commands, makes Framework7 a practical choice.

On the other hand, Konsta UI offers a comparable experience, making it a noteworthy alternative. Both frameworks empower developers with essential components like dialogs, action sheets, and accordions, as demonstrated in the code snippets.The beauty of these options lies in their flexibility, allowing developers to choose based on project requirements and personal preferences.

With these frameworks, JavaScript developers can transform the challenging task of mobile app development into a more manageable and creative process, leading to engaging user experiences.

Happy coding!