Framework7 v3 Is Coming Soon

This is very exciting release and a bit unexpected to be so soon, but first of all, don't worry, upgrade from v2 to v3 will not be such complex like from v1 to v2.

So what is it about? v3 won't be a huge update in terms of new features, but it is really huge in terms of ideology. The reason behind this major update is React.

A Bit Of Story

A bit of story. Ben Compton did a tremendous job to bring React support for Framework7 with his Framework7-React package, which was based on official Framework7-Vue package but did a lot of "Vue to React" functionality things on runtime. With Framework7 v2 release we realised that it will take too much efforts to do the same to bring Framework7-React v2, and it will take even more efforts and time to maintain and keep in sync all the Framework7 Core, Framework7-Vue and Framework7-React libraries. So we began to look for solution, how to unite them and how to keep them all in sync.

We realised that we need kind of universal thing, universal component definition that can be used with both Vue and React (and maybe later with WebComponents) keeping same functionality. Stencil.js looks pretty promising for this as it compiles to WebComponent which can be used by React and Vue js. But soon, it was refused as a solution for few reasons:

  • using web components (custom elements) in React and Vue.js requires some extra hacks https://custom-elements-everywhere.com/
  • Stencil.js uses own virtual-dom implementation (fork of Snabbdom). Not an option for us, because we need our F7-Vue/React components to utilize all "native" features of framework (Vue/React) they are used in, including Vue/React virtual dom implementation

So we decided to go with our own universal component compiler. And after few months of brainstorming and hardcoding we, together with Ben, finally nailed it!

Meet Phenome.js

The compiler we created we called Phenome.js - The ultimate cross-framework component compiler

And it works just amazing. We came up with own Phenome component syntax definition, which is similar to both Vue and React. And the most outstanding part is that in the end it compiles "phenome" component files to standalone and absolutely "native" Vue and React components, without any extra library dependencies, utilizing all "native" framework features and virtual dom implementations.

For example, we have some simple Phenome Card component file:

export default {
  name: 'my-card',
  render() {
    return (
      <div className="card" id="some-id">
        <p>This is card</p>
      </div>
    );
  },
};

This will be compiled result for React:

import React from 'react';

class MyCard extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return React.createElement(
      'div',
      {
        className: 'card',
        id: 'some-id',
      },
      React.createElement('p', null, 'This is card')
    );
  }
}

export default MyCard;

This will be compiled result for Vue:

export default {
  name: 'my-card',
  render() {
    const _h = this.$createElement;
    return _h(
      'div',
      {
        class: 'card',
        attrs: {
          id: 'some-id',
        },
      },
      _h('p', null, ['This is card'])
    );
  },
};

And of course it supports all features like Slots, State management, Lifecycle hooks, Props validation, etc. There will be a separate post about Phenome when we finish its documentation.

What Phenome Means For Framework7?

With Phenome components we will be able a way more quicker to release updates, fixes, keep all libs in sync and focus more on implementing new features and bindings. For example, as soon as we add new compilers to Phenome, like WebComponent, Preact, Angular, then Framework7 will automatically support these frameworks.

Framework7 v3

So what will be changed in Framework7 v3?

First of all, Framework Core (vanilla JS) library basically won't be affected at all, so it won't required some migration guide.

Framework7-Vue and Framework7-React GitHub repositories will be deprecated. New Vue/React components will be written as Phenome components, so their source code and compiled results will move to main Framework7 repo. It will help us to keep everything in sync with core lib. But NPM packages (framework7, framework7-vue , framework7-react ) will be still different packages.

Because Phenome is a universal component, so we have refactored FrameworkVue/React plugins and routers to be universal and as much framework agnostic as possible. So some Vue-only "hacks" will be removed or changed to different syntax.

1. Framework7-Vue/React Plugin Installation

At the moment to install and init Framework7 in Vue we do the following:

import Vue from 'vue';
import Framework7Vue from 'framework7-vue';
import Framework7 from 'framework7';

// Install F7-Vue plugin/router
Vue.use(Framework7Vue, Framework7);

// Init App
new Vue({
  el: '#app',
  // Init Framework7 by passing parameters here
  framework7: {
    // f7 params
    // ...
  },
});

In v3, it is a bit different:

import Vue from 'vue';
import Framework7Vue from 'framework7-vue';
import Framework7 from 'framework7';

// Different F7-Vue plugin initialization
Framework7.use(Framework7Vue, { Vue });

// Init App
new Vue({
  el: '#app',
  // No Framework7 init here
});

2. Framework7 Initialization

There is no more Framework7 params under framework7 root Vue properties. Now F7 init moves to new **f7-app** component in your main app template:

<template>
  <f7-app :params="f7Params">
    <f7-statusbar></f7-statusbar>
    <f7-view url="/" :main="true" class="ios-edges"></f7-view>
  </f7-app>
</template>
<script>
  import { f7App, f7Panel, f7View, f7Statusbar } from 'framework7-vue';
  import routes from './routes';

  export default {
    components: {
      f7App,
      f7View,
      f7Statusbar,
    },
    data() {
      return {
        f7Params: {
          theme: 'auto',
          routes,
          id: 'io.framework7.testapp',
        },
      };
    },
  };
</script>

For React it will be basically the same now:

import React from 'react';
import { App, View, Statusbar } from 'framework7-react';
import routes from './routes';

export default () => (
  <App params={{ theme: 'auto', routes, id: 'io.framework7.testapp' }}>
    <Statusbar />
    <View url="/" main className="ios-edges" />
  </App>
);

3. onF7Ready Method

onF7Ready Vue component method to execute F7 related API code is also gone away in favour of new$f7ready prototype method which is recommend to use in mounted / componentDidMount hooks:

// Vue Page Component
export default {
  // ...
  mounted() {
    this.$f7ready((f7) => {
      f7.dialog.alert('Component mounted');
    });
  },
};

// React Page Component
export default class extends React.Component {
  // ...
  componentDidMount() {
    this.$f7ready((f7) => {
      f7.dialog.alert('Component mounted');
    });
  }
}

And that is basically all major changes to worry about migrating from v2 to v3.

What is Next?

Framework7 v3 is almost ready, and we already have React/Vue kitchen sinks running, just need few more real world/app tests. So v3 should be released in June, 2018.

After new v3 release we will have a new long v4 roadmap targeting following major features:

  • Framework7 WebComponents library
  • More frameworks support, e.g. Preact, Angular
  • CSS variables support to make F7 app styling and theming much easier
  • First class PWA support
  • New UI components

And don't forget, if you love Framework7, you can support project by donating or pledging on Patreon: https://www.patreon.com/framework7