DEV Community: FeldsparTech

Vue Data Object : Details You Must Know

Karna Gogoi — Sat, 12 Mar 2022 14:33:45 +0000

We at FeldsparTech are using Vue to build our no code/low code platform ATMAN. And just like any other Vue application, data object is one of the most used options in our application too. Even though using a data object is very simple, there are a few minute but important details about it that one should understand.

1) What is the data object?

Vue provides an option called data, which is a function that Vue calls every time it creates a new instance of the component.This function has to return an object which Vue will wrap up in its reactivity system. That means if you are using a data object in your html, then, any change to that object will cause the html to render.

2) How do you create one?

JSFiddle

new Vue({
  el: "#example",
  data() {
    return {
      hello: "Hello World!!"
    }
  }
})

and use it in your html as

<div id="example">
  <h2>
    {{ hello }}
  </h2>
</div>

3) When is a property not reactive?

Vue allows you to create a property outside of the data option. So, if you want you can create a property like this:
JSFiddle

new Vue({
  el: "#example",
  -
  -
  -
  mounted() {
    this.defaultName = ""
  }
})

But!!

One problem with this way of creating a property is that Vue will not be able to add it to its reactivity system. And therefore if you use this property in your html like this

<div id="example">
  <h2>
    {{ defaultName }}
  </h2>
</div>

and later make a change to this property,

<div id="example">
  -
  -
  -
  <button @click="changeName">Change Name</button>
</div>

new Vue({
  el: "#example",
  -
  -
  -
  mounted() {
    this.defaultName = ""
  },
  methods: {
      changeName() {
          this.defaultName = "Enoch"
      }
  }
})

Vue will not be able to catch the change and the template will not update.

But there can be situations when you might need to make this kind of change and want the html to be reactive. So, for that Vue provides various ways to make the changes reactive, about which you can read more in detail here.

4) Common mistake

One common mistake that one should be aware of is that initialising a data property with another property does not make it reactive.

Let's say you are making a todo application and you have created it like this
JSFiddle

<div id="example">
  <div v-for="(todo, i) in todos" :key="i">
    {{todo}}
  </div>
</div>


new Vue({
  el: "#example",
  data() {
    return {
      todos: ["todo1", "todo2", "todo3"]
    }
  }
})

Now let's say you want to have a default todo item always added to the top of the list and its value changes depending on which day it is.
So you add it as:

new Vue({
  el: "#example",
  data() {
      return {
          defaultItem: "MondayTask",
          todos: [this.defaultItem, "todo1","todo2","todo3"]
      }
  }
})

Now even if you change defaultItem property, the todos list will remain the same. As both the properties are initialised at the same time Vue doesn't know that it has to react to any change in defaultItem and update todos.

Learnings:

Create all your properties in the data option for them to be reactive.
Initialising a data property by another property does not make it reactive.

References:

https://vuejs.org/v2/guide/instance.html#Data-and-Methods
https://vuejs.org/v2/guide/reactivity.html

How to move on from the tutorial phase as a beginner?

Nikhat — Fri, 31 Dec 2021 12:36:53 +0000

If you are new to programming, one of the first things that probably aids you in your self-learning process is the many resources and tutorials that are available. A quick google search can be both a blessing as well as an overwhelming experience thanks to the digital connectivity we have today. After going through multiple suggestions on various portals, I found these to be most commonly listed to help a budding programmer.

1. Build Projects

Ask someone who codes for a living how to get better at coding, I can guarantee you that they will all tell you: build projects, start working on something you feel invested in, it doesn’t have to be a huge project! You will probably be left wondering what falls under a project? How do I build one? Where do I start? Firstly, take a step back and breathe. Then, break down your idea into multiple sub tasks, write down what all you want to achieve and begin. Also, it’s perfectly all right if what you want to do isn’t unique at all. The point is to build something on your own.

2. Practice, practice, practice!

As with many other skills, your programming gets better only with time and dedication from your end. Make sure to spend an hour a day or so working on the concepts you struggle with, most often used modules in the language you’re learning, get your basics correct by working on exercises - I personally find exercise problems at the end of textbook chapters quite helpful to develop logical skills; there are a few websites like Edabit dedicated for that purpose alone. These problems could comprise a small program using multiple methods or just a single method.

3. Read Code!

You know how something clicks simply by looking at it repeatedly? Read it once and you have no idea what it means but give it a few more tries and the brain fog gets clearer? Well, I feel it’s like that with code too. Not only will you get familiar with the language but you will also get an idea on how a particular problem is solved or what course another coder has taken. Basically, you will be learning from their thought process. At the end of the day, code is a structured write up telling you what exactly is being done.

4. Go through the tutorial again

Once you feel like you have gotten better than you were before, go back to the basics. I know this particular point feels like you will be kept in the loop instead of breaking out of it, but give it a try if the course you initially started with was a detailed one and you might not have grasped its concepts better back then. The purpose is to strengthen your basics, it is a major plus if the course is more hands-on. This time you can actually pause, attempt a problem on your own and take help from the tutorial if you feel the need to.

5. Read technical articles, follow other developers and their work

There’s a ton of programmers out there producing quality work every single day. Ranging from keeping you up-to-date with here-to-stay technologies like no-code/low-code platforms to covering concepts through detailed code, you will learn a lot and can decide the extent of programming you wish to add to your portfolio. Follow them on blogging websites or their social media, I promise you will get a little bit of technical exposure every day! This will make you feel like a part of the developer’s community and sometimes that might be the push you need to stay consistent.

6. Teach - and finally, teach!

If you really want to learn something and be good at it, you have to attempt to teach it. Not only do you feel confident at your skills by doing this, but there’s also more clarity that comes along with it. You can either blog about what you’ve learnt or teach it to someone else. Find any means which work for you. If you aren't sure where to begin, start with teaching yourself: write down what you’ve learnt and explain that certain bit that confused you earlier and how you arrived at a solution. Just like building your first projects, this doesn't have to be spectacularly grand either - keep it simple and short and grow from there.

So, this is it then! I'm going to conclude my first technical blog post here. These tips are more of a continual reminder for me and anyone who's feeling lost and unready out there. If you have any more suggestions or would like to add onto these points, do let me know below.

Speeding up Cypress Automation Tests

Vivek Kodira — Sat, 18 Sep 2021 15:56:36 +0000

Here are a few tips on making your Cypress automation tests runs faster.

NOTE: Some of these may seem trivial but they are all actual mistakes made by me. I hope you'll learn from my mistakes.

Write one big test rather than several small ones

A real-world integration test typically involves signon, etc before testing the actual functionality. Each test you add will therefore add to the time taken. Also, as Cypress's best practices document explains, Cypress does some housekeeping between each test. This will also slow you down if there are too many small tests.

Use `before` & `beforeEach` judiciously.

Consider this example:

    beforeEach(()=>{
        cy.login();
        cy.get('[.homePage]').should('be.visible');
    });
    //10 tests

Here, the test will login 10 times - once before each test. What I actually wanted was to login once and so should replace beforeEach with before

    before(()=>{
        cy.login();
        cy.get('[.homePage]').should('be.visible');
    });
    //10 tests

Avoid waiting for arbitrary periods of time.

Cypress explains that cy.wait(Number) is an anti-pattern and you can almost always replace it with an assertion. Read Cypress's detailed explanation and examples to understand more. If you succumb to the temptation to add cy.wait() anyway, they will eventually become a time-sink.

Tweak Cypress's configuration to remove unnecessary disk I/O

Cypress aims to "just work" and does this admirably. A configuration file is automatically created by Cypress on the first run. Some of the options here increase the disk I/O and hence slow down Cypress itself. The main culprits are:

video
videoUploadOnPasses NOTE: This one only applies if you are also using Cypress's dashboard. By default Cypress uploads all videos when connected to Dashboard which you probably don't need.
screenshotOnRunFailure

Turn these off or turn on only for nightly runs etc. where you are not worried about the time taken.

Tag tests and run only the ones you need to

Cypress's list of curated plugins includes cyress-grep. Using this plugin, you can run tests by grepping their titles or custom tags you've added to each test. Use this ability to run only the necessary smoke or feature-specific tests.

Incorporate Cypress into your CI/CD

This one is a little harder to implement but worth the effort. Take the time to read and understand how Cypress can be plugged into your CI/CD pipeline. As with everything else, Cypress's documentation here is extensive. As your test suite grows, offloading running the suite to some other system may be more performant than running all the tests locally on your laptop.

Extending a Component Library using Vuex

Vivek Kodira — Mon, 07 Dec 2020 16:27:15 +0000

At FeldsparTech we are working on a no-code platform called Atman. Atman's UI is a component library that works as a standalone application or can be embedded into another application to enable quick no-code workflows.

One of our goals is to allow granular control over our components. If this only meant rendering - we would build Renderless components. However, we also want the consuming application to be able to override, modify and augment behavior.

The approach we have chosen to achieve this goal is to use a Vuex store.

Prerequisite: Both the consuming application and the library should import and use Vuex.
We first need to dynamically register our library as a module in the application's store. This is possible through the registerModule method

if(!this.$store.hasModule("ourlibrary")){
   this.$store.registerModule("ourlibrary", store);
}

Methods that need to be customizable are implemented as actions in a vuex module. Within the action, the behavior could vary:
- If we want the consuming application to be able to override behavior, the action first checks if a global action is available and invokes it. If not, the action proceeds to perform the default logic specified in the library.
- If we want the consuming application to augment behavior, the module action first performs the internal logic and then invokes the global action (or vice versa) to perform any augmentation as necessary.

Overriding behavior example

 overriddenMethod({dispatch},params){
    if(this._actions["overriddenMethod"]) {
       return dispatch("overriddenMethod", params, {root:true});
    } else {
      //Default behavior
    }
}

Augmenting behavior example

 augmentedMethod({dispatch},params){
     let response;
     /*
        Internal logic which updates `response`
        ...
     */
    if(this._actions["augmentedMethod"]) {
       globalResponse = dispatch("augmentedMethod", params, {root:true});
    }
    /*
        Update `response` with `globalResponse`
    */
    return response;
}

This pattern is quite powerful. For instance, you can now even allow the consuming application to entirely replace a particular nested component with one of its own.

Here, the vuex action functions as a Factory. Now you can customize the logic as per your needs. The Overriding approach will entirely replace default component. The Augmentation approach will allow the consuming application to add business-specific components you may not want in the library.

Dynamic Component in the Library

<template>
    <component v-if="currentComponent" v-bind:is="currentComponent"></component>
</template>
<script>
export {
    //...
    async mounted() {
      this.currentComponent = await this.$store.dispatch(`<module>/deriveComponent`)
    }
}
</script>

Action in Library's store

deriveComponent(context, params) {
    let currentComponent;
    //augment or override as per your requirements
    return currentComponent

}

Resources I found useful during this exercise

Github template to create a vuetify component library
mitevpi / vuetify-component-lib-template

Template for creating a component library/design system using Vue.js and Vuetify.js.
Vue.js + Vuetify.js Component Library Template

A Design System / Component Library Template for enabling graphic consistency and legibility across web development projects by creating reusable components and styles with accessible & legible documentation Built on top of Vue.js and Vuetify.js.

Usage

This Template is comprised of two major categories: Styles and Components. It builds to compiled components (.js) and compiled styles (.css) from the source (.vue) files which can be used across web applications. It also creates a Storybook site for component/design system documentation.

Clone this repository locally, and use it as a starting point for building a component library / design system on top of Vue.js and Vuetify.js

Added/Updated Configurations to Vue CLI Starter
Key Commands

After cloning/downloading the repository locally, install the required dependencies using…
View on GitHub
A step-by-step series by siegerts on how to create a Vue JS component library

Creating a Vue.js component library: Part I - Introduction

siegerts ・ Jul 7 '20

#vue #library #plugin #vuepress

Also cross-posted on Medium

Online Reading — Why it fails for some formats

Vivek Kodira — Sat, 21 Nov 2020 14:05:04 +0000

Did you know that the world does not know whom to credit as the inventor of E-books? There are contenders for the title from as far back as 1946. Ref

For you and me, our first time experiencing e-books were as PDF documents. These were typically technical journals and pirated scanned versions of popular books.

It took some time for traditional publishers to accept this new format and begin selling them but since then e-books have exploded. Project Gutenberg now has over 60000 books one can read for free. For many of us, E-books are now the preferred format. This could be for several reasons:

Cost (an e-book is typically cheaper than the physical alternative)
Space (e-books don’t take up any space. You can carry a thousand on a holiday)
Convenience (you can read an e-book in the dark)
Environmental impact (e-books don’t need paper and so fewer )

But even the most ardent fans of the format will admit that there are disadvantages.

With e-books we lose the tactile experience of touching and feeling a physical book
Some formats, graphic novels, comics and childrens’ books for instance do not lend themselves to an e-book format The second disadvantage is the focus of this blog.

Graphic Novels and Comics as Ebooks

With the limited screen real estate in small devices, text such as speech bubbles in graphic novels and comics are often not seen clearly. Google and Amazon, the big two players in the e-book market both address this in similar ways — by zooming in certain portions of the page.

Google’s Bubble Zoom enhances speech bubbles in each panel. Amazon’s Guided View navigates a comic panel-by-panel

These approaches address one problem but end up creating another. Arbitrarily zooming in on certain portions and truncating others may make the text legible but harm the overall experience.

The focus on the textual content mean that user loses out on experiencing the art.

How do you do justice to art?

Graphic Novels, comics and Childrens’ books are as much about the illustrations and the art as the story.

The art in such books are a labour of love and painstakingly detailed. Mobile Form factors do not render these as originally intended by the artist.

Artists and authors recognize the issue and are beginning to address this problem in new ways. Webtoons, a site with mostly South Korean artists, formats all content in vertical panels with very large text bubbles — this is art designed specifically for consumption on mobile devices.

Graphics are not just for entertainment

Before we dismiss this problem as trivial and relevant only to entertainment, consider that graphics are an integral portion of most technical manuals. To quote a cliche “a picture is worth a thousand words”.

Today, graphical novels are being used for more than just comics. Google has used them to explain the inner workings of a browser. Universities use them to explain copyright laws. So this isn’t a challenge to be taken lightly.

Where do we go from here?

Content creators are evolving to produce art that is more easily rendered on mobile devices. E-book stores are creating technology to help improve a consumer’s experience of consuming such content. However, convenience and market forces are not the only driving factors. As technology makes them more affordable, people who can afford it, are moving to other larger form factors such as tablets. These solve the problem of real estate.

At FeldsparTech, one of our design tenets is to model technology after nature and the real world. We believe that reading a digital book should be as similar to reading a physical one as we can make it. And that everything else that consuming digital media typically entails (algorithms, annoying ads) should be removed or reduced from the user’s experience.

References

Also posted here

Sunk Cost Fallacy and Books

Vivek Kodira — Sat, 21 Nov 2020 13:50:51 +0000

“Individuals commit the sunk cost fallacy when they continue a behavior or endeavor as a result of previously invested resources (time, money or effort)
(Arkes & Blumer, 1985)”

How often have you read a terrible book all the way through just because you have already paid for it or read halfway through it. This is the sunk cost fallacy at play.

Online book stores allow you to preview books — read the first few pages before deciding. But what if you decide you don’t like a book halfway through?

There are two factors that typically contribute to the sunk cost fallacy — one is the effort and time already invested, the second is the actual money already spent.

There is not much one can do about the former, but the financial cost is definitely something that can be addressed. There are two ways to do this.

The easiest is to reduce the cost so that you the consumer don’t have to worry about it when deciding what to do next. This approach however is zero-sum — i.e to benefit you, the creator of the content you are consuming will have to suffer.
Another is a pay-per-use model. You pay only for what you consume. When you decide to stop, you can. But not all media lends itself to this model; books for instance. But what if there was a way to implement pay-per-use for books?

We at FeldsparTech think we know of a way and can’t wait to show you what we have in mind.