NativeScript-Vue in Renderless Components

Prathmesh DUDHNIKAR   July 29, 2019, 5:10 p.m.   July 29, 2019, 5:25 p.m.


What are Renderless Components?

Components get harder to maintain as they grow larger. Sometimes it is not obvious how to split a bloated component into smaller components. The code gets more noisy and they become hard to reason about.

In this post, I am going to introduce the idea of "renderless components" which could potentially help you improve your components.

Lifecycle hooks

 

Related image

Let’s take a look at how we can build a simple renderless component for handling lifecycle hooks.

// src/components/FrameHooks.vue
export default {
  created() {
    // As soon as this component is created, it's parent component
    // must have already been created, so we immediately trigger the hook.
    this.$emit('created');

    const triggerMounted = () => this.$emit('mounted');
    this.$parent.$on('hook:mounted', triggerMounted);

    const triggerUpdated = () => this.$emit('updated');
    this.$parent.$on('hook:updated', triggerUpdated);

    this.$once('hook:beforeDestroy', () => {
      this.$parent.$off('hook:mounted', triggerMounted);
      this.$parent.$off('hook:updated', triggerUpdated);
    });
  },
  render() {
    // Render the first child of the default slot.
    return this.$slots.default[0];
  },
};

In the following example you can see how we can use our newly created FrameHooks component in combination with a renderless ArticleListFrame component to trigger an API request for fetching a list of articles.

 

<template>
  <ArticleListFrame
    v-slot="{ articles, methods: { fetchList } }"
  >
    <FrameHooks @created="fetchList">
      <ul class="ArticleList">
        <li v-for="article in articles">
          {{ article.title }}
        </li>
      </ul>
    </FrameHooks>
  </ArticleListFrame>
</template>

It currently supports the following stacks: 

  • JavaScript
  • TypeScript
  • Angular
  • Vue

NativeScript 5.0

Recently, NativeScript 5.0 was released by Progress Telerik. Improvements in this version are more relevant to tooling and developer experience. Features in this version are listed below:

  • Hot Module Replacement (HMR).
  • Interactive tns create command.
  • Safe Area support in iOS.
  • Create plugins with tns plugin create
  • Support for different app IDs for iOS and Android.
  • Vue.js support for all NativeScript UI components.
  • (breaking-change) Migration to support Android library APIs v28.
  • (breaking-change) Dropped support for X-Code 8 & iOS 10.12 Sierra.

Tooling

This the area where NativeScript shines. NativeScript has an outstanding tooling support.

You can work with NativeScript in 2 ways.

1) On a Local machine

2) Using a WebIDE

UI: Layouts and Styling

  • StackLayout: Elements are stacked horizontally and vertically.
  • GridLayout: A rectangular grid with rows and columns.
  • AbsoluteLayout: You can set the location of child elements exactly in this layout.
  • FlexLayout: This is based on CSS Flex Layout. However, it is non-conforming.
  • DockLayout: Elements in dock layout are positioned on edges. The last element takes up remaining space.
  • WrapLayout: Elements in WrapLayout are arranged in a grid of rows and columns. If space runs out, the remaining elements are placed in the next row/column depending on orientation.

Styling

CSS properties can be declared

  • Application-wide
  • Inline on elements
  • Page Specific CSS


0

Like

Stay Connected With Us

Head Office

GKTCS Innovations
2nd floor, Sumansudha,
Besides OM Hospital, Aamchi colony,
NDA Pashan Road, Bavdhan,
Pune 411021, Maharashtra, India.
Contact Person-Mr. Surendra Panpaliya
Contact no.-9975072320
Email-surendra@gktcs.com

@2018 GKTCS Innovations Pvt. Ltd. All Rights reserved | Privacy Policy | Site Map