Skip to main content

Vue and React experiences

Recently I have been doing a cross-platform mobile app with React native and also a web app frontend with Vue.js. As a reluctant java bull, building front-ends with something different than Java has been indeed something I have been looking for for a while.

The React native mobile app is something I'm developing solo and is for a customer in importing tools for machine workshops business. It is a pretty straightforward shopping catalog-like app with a focus for customizable catalogs for each customer. I have found it to be pretty much perfect for a first project, the domain is simple and there are plenty of ready-made stuff and example applications where to look for inspiration

On the project where Vue is being used, the old technology was Angular, versions 1 and 4. There was a decision to use Vue for the new front-end components and I was fortunate enough to be in the team making the first one and participate in building a template project that would be used by all new front-ends.

There are numerous comparisons between Vue and React, here is another very opinionated one

JSX vs Vue components
We are writing the Vue templates with plain old HTML. The reasoning behind this that there would not be too many new things to learn when starting this new thing. There were some attempts to use Pug but that was not seen to be something we should continue.
Granted, 90% of my React experience has been with React native so I have not written very little web app templates with it but somehow I like the Vue experience here a bit better although personally, I would like to have continued using Pug

Unit testing
We have written the Vue tests with Jest using the vue-test-utils library. It has been ok, but there have been some issues with when to use the $nextTick, when to wait for promises to see all changes happen. Updating to version 1.0.0-beta.13 has helped here since it makes the watchers synchronous by default but yet there have still been some hard to debug problems related to when to wait for next tick.  Here React (native) wins since the testing is a bit more "in-built" to Jest itself so there are more examples and my gut feeling is that testing similar use cases would result in less code with React native

Flux implementation
Similar, but instead of using immutable reducers Vuex is using mutators so the state is a global object which mutates. Supposed to be a performance improvement. I don't have too strong an opinion here, I think both are just fine.

Guidelines / how-tos
The hard thing is to figure out what is the so-called right thing to do at a given time to use the framework. As the team was (and still is) inexperienced with Vue, we certainly struggled to figure out the most elegant way or the Vue way to solve problems. We have our template project based on a community made template and the development has been reasonable and even when the project has grown a tad larger, the structure itself has not slowed us down.

Overall, there are more examples and open-source components on the React camp but Vue also has plenty of choices on almost anything you would need in a typical web app. One interesting question is that when the app becomes more complex, which will handle it better? In other words, which has better performance, style guides, and examples how to handle a larger code-base.

Labels:

Comments

Post a Comment

Popular posts from this blog

I'm not a passionate developer

A family friend of mine is an airlane pilot. A dream job for most, right? As a child, I certainly thought so. Now that I can have grown-up talks with him, I have discovered a more accurate description of his profession. He says that the truth about the job is that it is boring. To me, that is not that surprising. Airplanes are cool and all, but when you are in the middle of the Atlantic sitting next to the colleague you have been talking to past five years, how stimulating can that be? When he says the job is boring, it is not a bad kind of boring. It is a very specific boring. The "boring" you would want as a passenger. Uneventful.  Yet, he loves his job. According to him, an experienced pilot is most pleased when each and every tiny thing in the flight plan - goes according to plan. Passengers in the cabin of an expert pilot sit in the comfort of not even noticing who is flying. As someone employed in a field where being boring is not exactly in high demand, this sounds pro...
Post a Comment
Read more

Canyon Precede:ON 7

I bought or technically leased a Canyon Precede:ON 7 (2022) electric bike last fall. This post is about my experiences with it after riding for about 2000 km this winter. The season was a bit colder than usual, and we had more snow than in years, so I properly put the bike through its paces. I've been cycling for almost 20 years. I've never owned a car nor used public transport regularly. I pedal all distances below 30km in all seasons. Besides commuting, I've mountain biked and raced BMX, and I still actively ride my road bike during the spring and summer months. I've owned a handful of bikes and kept them until their frames failed. Buying new bikes or gear has not been a major part of my hobby, and frankly, I'm quite sceptical about the benefits of updating bikes or gear frequently. I've never owned an E-bike before, but I've rented one a couple of times. The bike arrived in a hilariously large box. I suppose there's no need to worry about damage durin...
Post a Comment
Read more

Extracting object properties from an IFC file with IfcOpenShell

Besides the object geometry information, IFC files may contain properties for the IFC objects. The properties can be, for example, some predefined dimension information such as an object volume or a choice of material. Some of the properties are predefined in the IFC standards, but custom ones can be added. IFC files can be massive and resource-intensive to process, so in some cases, it helps to separate the object properties from the geometry data. IfcOpenShell  is a toolset for processing IFC files. It is written mostly in C++ but also provides a Python interface. To read an IFC file >>> ifc_file = ifcopenshell.open("model.ifc") Fetch all objects of type IfcSlab >>> slab = ifc_file.by_type("IfcSlab")[1] Get the list of properties >>> slab.IsDefinedBy (#145075=IfcRelDefinesByType('2_fok0__fAcBZmMlQcYwie',#1,$,$,(#27,#59),#145074), #145140=IfcRelDefinesByProperties('3U2LyORgXC2f_hWf6I16C1',#1,$,$,(#27,#59),#145141), #145142...
Post a Comment
Read more