Migration 0.13 to 0.14
-
Hello, I am using 0.13 for my app, is it possible to update to 0.14 without breaking or just with some simple fixes?
-
It very much depends on what components you were using.
You’ll have to fix a few imports and adjust your layout syntax. That’s for sure, and it can take between an hour and a few days, depending on how quickly you pickup the new layout and import concepts, and on how large/complex your app was.
This will help you, please post any question/issue there for support (it will also be the basis of an official upgrade guide later on):
http://forum.quasar-framework.org/topic/522/upgrade-guide-for-0-14-beta -
I am sorry for all whom expect a migration via magic button or script able in a couple of hours to do the job or solve it with find and replace, it did not work for me at all.
I am working in moving a large invoicing web/app from 0.13 to 0.14 and tasks are really tough, 0.14 is great but it changes a lot of ui behaviours …
I know a migration guide is coming but distance is much longer that one digit.
There is a lot of work behind and in any point apps has to move forward, updated, bug fixed, etcA couple of things I found just beginning:
0) You will not have src in node-modules so for every Quasar element you have to declare and import, for instance it is how things should be done. In some points I had used quasar 0.14 src to go further than current documentation.- Layout has to be adjusted, one should be learn how new layout can be set and make changes. No Drawer. If target app use slots for layouts you have to change some labels and play. 0.14 layout is much easier by far in this release, so one can take this as housekeeping, and simplify code.
- Import Utils does not work, so all elements have to be imported individually, specially dom, format functions, etc.
- Buttons, changing <button to <q-btn, I am afraid it will not be enough, events can work but style has to be checked, and dynamic use of icons has to be moved to q-icon and use “name” prop for the icon.
- Icons and style is another point to consider, it depends on what icon set your app is using (material, fontawesome, etc.)
In target app main.js Icon set should be imported, load style theme mode (css or styl) - Toolbar, another brick in the wall, in 0.13 is a class div and in 0.14 use <q-toolbar, anycase class and style has to be reviewed.
- Some app css styles using classes for toolbar or button will not have effect as html objects classes are renamed with qt, so app stylesheets has to be reviewed. This is a big issue pretty normal by the way with ui updates.
- Autocomplete is an example of changes, in 0.13 my app use input inside autocomplete and in 0.14 this is reversed
Despite I have my own modifications of autocomplete and data-table all elements has to be revised, because usually elements has others elements dependencies, so process will be a long cascade of changes.
So make your space, read carefully current 0.14 doc and then be patient and review 0.13 code, the final results will be worth, but it will take patient and time, I am still in the process.
I have to confess that sometimes I thought if it was not better to start the whole UI of the application again. I think it would be helpful to get familiar with 0.14 in a new application and then later try to migrate others.
Think that as in life, inevitably to go forward implies to drop some older ways of doing and learn/apply other methods … we are not in a position of judge these changes, only in a point to understand and implemented them for our target application users benefits.
-
Those are great notes Jesus.
If your 0.13 app is really complex, starting over might be an easier task. I am not sure. I am sure that 0.14 is a huge swap over to more props for better control of the components, which in the end, means a better UX, both for the dev and in the end, for the user.
Scott
-
Also, if you initialy created your Quasar application out of the v0.13
quasar-template-default, you may find it helpful to look at the diff of the master branch compared to the beta branch. Keep in mind that only the files that changed in themtemplatefolder are relevant.I started migrating to v0.14 by reading through each components doc, then I applied all the fixes from the template diff and fixied all the errors that occured during build with the new version.
Next step I would suggest is to update the layout accordingly to the layout docs. This will help, because now your application doesn’t look totally broken
.
After that the tedious part begins, where you have to go through all of your commponents, look at the Quasar components used, and update them accordingly to the docs.For me the most notable changes where in the following components:
- Forms - The form components got a complete overhaul, the no longer use CSS classes, but know are components on their own. The
QFieldcomponent comes in really handy, if you want to dispaly helper messages and achieve consistent styling. - Cards - Card are now also implemented as different components
- Lists - Also items on their own, and increased flexibility, examples come in handy.
- Grid system - Complete overhaul, very similar to Bootsrap 4 grid
Most of the time you do not have to change a lot in your code, only in your templates, because the API stayed the same for most components. I would suggest to use the time to refactor your code a bit, because Quasar v0.14 introduced a lot of new helpers / posibilities to clean things up by quite a bit. In the end I even managed to reduce the size of our codebase by quite a bit.
And even if it is tedious work, in the end it is totally worth it, and I am even excited to refactor existing components to use new stuff that was added in v0.14!
Also you could use the time to report possible issues with the beta, and try to improve the docs, if some things are unclear to you, so Quasar finally can get the attention it deserves.
- Forms - The form components got a complete overhaul, the no longer use CSS classes, but know are components on their own. The
-
Thanks @jesus and @a47ae for details of your migration experience. I guess they’ll be very useful to all “migrants” and for the development of a proper upgrade guide.
I would also like to apologize to all readers for a slight oversight in my previous post, which may have been misleading.
A crucial word was missing from my post……it can take between an hour and a few [days]
-
We are passionated about v0.14 but hold your horses, first learn how new version works in depth, you will probably discover that your are dealing with a new framework to finally conclude that it is worth to rethink most of your ui app before to consider to upgrade from 0.13.
For me it is a major upgrade rather than a simple update.
I hope to be wrong but I do not see a clear upgrade path, a deep refractor is need, in some case it will push to rewrite components and app flow.
If one does not know well v0.14 and vuejs version behind and how to use it appropriately, the it will not be posible to estimate how much it will cost in time and work.
Any way sooner or later v0.14 will be the path so make space and be ready. -
my drawer is very slow and buggy in 0.14 is that a known issue?
-
Do you have an example repo? Also is this also the case for you on the Showcase?
-
yes, i cloned the showcase repo and also found there this bugs. when i open the drawer in the component of “color palette” the drawer is a bit laggy. not that smooth like in 0.13. also when i sometime close the drawer by swiping and my swipe was not exactly to the end. the drawer closes, as expected but i cannot scroll my content until i open the drawer and close it again properly. its just buggy a bit. i think this drawer component from v0.13 was great.
-
Please record a video of it and post an issue in Github, for me it does not really feel laggy, so either it is with your browser, or the perception of the animation.
