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.

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.

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>

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!

originally published here at my blog