DEV Community

Cover image for Imba v2 Alpha - a New Age
Alexander Alemayhu
Alexander Alemayhu

Posted on

Imba v2 Alpha - a New Age

All of the Imba v2 alpha changes just got merged into the master branch 😋 @somebee has been hard at work at the end of 2019 to get a new version of Imba out. Exciting times are ahead with lots of improvements to the developer experience 🛠

With change comes some disruption and there will be a few breaking things. The v2 version has not been officially released yet, but you can install the latest build with

yarn add imba@pre # npm install imba@pre

There is also an example project available at

GitHub logo imba / rollup-app-imba

Imba Rollup App Template / Starter

Imba 2 Template Netlify Status

preview-image A local project starter template for a Imba v2-alpha.

You are running a bleeding 🩸edge project 👨🏾‍🚀👩🏼‍🚀. Expect bugs and report them

Some of the amazing improvements to the next iteration of Imba are

  • Tags now compile to native web components 🤯
  • Lots and lots of improvements from ES concepts
  • Support for slots
  • Smart Styles latest PR info

For a list of other updates read:

Installation

On GitHub you can use this repository as a template for new projects, just click Use this template.

Alternatively clone this repository into your desired directory. Replace PROJECT_NAME with your desired folder name, or remove for default "template" name.

git clone https://github.com/imba/template.git PROJECT_NAME

Running the App

The commands below assume you are using either yarn or npm (not both).

Install the Dependencies

yarn # npm install

Start

Imba will see more changes before the actual release happens. Bugs are also expected but this is a great way to start of 2020. If you are interested in seeing all of the changes there are more than 230+ commits in the pull request. I have extracted the description below for your convenience 😉


We've been working on version 2 of imba for some time. To speed up the process we've decided to move development to master and actively encourage new users to start with v2, despite the fact that it is not quite ready for primetime.

We will write more extensively about the changes in the coming weeks before the official launch, but v2 includes a huge number of changes. The breaking changes will make migration from v1 very painful (until
migration tools are in place).

The reasoning behind all these changes will be discussed in the Imba Changelog casts on scrimba.com in the upcoming weeks.

Improvements

  • Future-oriented syntax changes
    • Template strings
    • Object destructuring
    • Decorators
    • Iterators (for of)
    • Class fields
    • Private class fields
    • ES6 classes
    • ESM import/export
  • Tag improvements
    • Support for slots
    • Support for fragments
    • Compiles to native web components
    • Consistent and performant mount/unmount
    • Dynamically named tags <{object.type}>
    • Functional tag components
    • Memoization everywhere
    • Improved event handling with modifiers++
    • Insane performance (details to come :P)
  • Much smaller standard library

Breaking changes

  • Implicit self removed - use self.identifier or @identifier
  • Implicit calling removed - use () to call methods without arguments
  • Removed prop syntax - see new class field syntax and behavior
  • Symbols :symbol are deprecated - use strings instead.
  • Keyed tags are now set using $key=mykey instead of @{mykey}
  • Use def constructor instead of def initialize
  • Use spread ... syntax instead of splats *
  • Use static def method instead of def self.method
  • Class bodies are no longer executable

Current limitations (to be rectified)

  • Limited support for extending native tags
  • No support for extending svg tags
  • No support for server-side rendering
  • Custom tags must be lowercase and include dashes
  • Tooling even worse than with v1
  • Advanced tag loops with multiple children are flaky
  • Cannot define event listeners as methods like def onclick
  • Touch support (ontouchstart/update/end) removed (to be replaced)

Imba 2 - a new age #258

We've been working on version 2 of imba for some time. To speed up the process we've decided to move development to master and actively encourage new users to start with v2, despite the fact that it is not quite ready for primetime.

We will write more extensively about the changes in the coming weeks before official launch, but v2 includes a huge number of changes. The breaking changes will make migration from v1 very painful (until migration tools are in place).

The reasoning behind all these changes will be discussed in the Imba Changelog casts on scrimba.com in the upcoming weeks.

Improvements

  • Future oriented syntax changes
    • Template strings
    • Object destructuring
    • Decorators
    • Iterators (for of)
    • Class fields
    • Private class fields
    • ES6 classes
    • ESM import/export
  • Tag improvements
    • Support for slots
    • Support for fragments
    • Compiles to native web components
    • Consistent and performant mount/unmount
    • Dynamically named tags <{object.type}>
    • Functional tag components
    • Memoization everywhere
    • Improved event handling with modifiers++
    • Insane performance (details to come :P)
  • Much smaller standard library

Breaking changes

  • Implicit self removed - use self.identifier or @identifier
  • Implicit calling removed - use () to call methods without arguments
  • Removed prop syntax - see new class field syntax and behaviour
  • Symbols :symbol are deprecated - use strings instead.
  • Keyed tags are now set using $key=mykey instead of @{mykey}
  • Use def constructor instead of def initialize
  • Use spread ... syntax instead of splats *
  • Use static def method instead of def self.method
  • Class bodies are no longer executable

Current limitations (to be rectified)

  • Limited support for extending native tags
  • No support for extending svg tags
  • No support for server-side rendering
  • Custom tags must be lowercase and include dashes
  • Tooling even worse than with v1
  • Advanced tag loops with multiple children are flaky
  • Cannot define event listeners as methods like def onclick
  • Touch support (ontouchstart/update/end) removed (to be replaced)

Discussion (1)

Collapse
bregymr profile image
Bregy Malpartida

Awesome