Why the Composition API?

Kafui Alordo — Mon, 02 Jan 2023 11:43:57 +0000

A short but concise note on why it is called or referred to as an Options API when you are torn apart on which of them to use.

Before we continue, note that the Composition API however is not meant to replace the Options API completely but rather, purely additive and only an alternative syntax for writing components in Vue.

They perform the same function
and can both be used concurrently in the same project.

Vue 3 is introduced as the New Default

But why was it introduced?

1. TypeScript Support
If you're gonna use TypeScript out of the box, then you are sure to leverage the Composition API instead.

2. Better Organization
Composition API provides better code layout and organization for our components than the Options API, if you're working on a more larger project.
remember the Composition API uses the setup() hook.

3. Better reusability
The Composition API offers a better code reusability than the mixins alternative the options API offers to handle the same logic. You can checkout mixins if you aren't familiar with it yet.

And that is it,

Though the Options API is completely optional, it can/or cannot be used per your preference and expert experience in writing Vue applications.

But I will advice as well to know how to use more the Options API by heart, so you better know when you're confident to go full Composition API in your next big project to clear any before doubts.

Happy Coding, Happy New Year!!!

Replicating Expensify.com in Next.Js

Kafui Alordo — Thu, 27 Oct 2022 13:08:22 +0000

Disclaimer:

This is not yet another How-to guide but to share with you the project am currently working on from the ground up in Next.Js - a framework I have discovered recently so I can quickly implement the different shiny stuffs that it has to offer and understanding its ecosystem.

Though Still a work in progress, You can clone and contribute to the code here next-expense

the Stacks:

React
Next.Js
MUI
Magic Auth
Airtable
JavaScript
TypeScript

Quite recently I have chanced upon Next.Js barely two months ago when I was contributing to a commercial product for a client - a mobile first web application built entirely in Next.Js - front-to-backend.

I presume you're already familiar with the Reacct/Js ecosystem of building application, if you're not, you can checkout the React docs here getting started with react to familiarize yourself. Even though it is claimed you don't need much react to get started with Next.Js - but you definitely need it.

I was fascinated about the framework which preached the gospel according their website:

I quickly glanced at the docs, and played with the demo tutorial to quickly get started.

That wasnt enough so I decided to scout some resource more - and chanced upon a full stack implementation of Next.Js to build a Nextflix-like clone. Code here as well next-flix

Fast forward having come from a React background, I want to go a step further in applying my skills to other concepts and implementing more complex systems with differentiate kind of approach. I must say I like the abstraction Next.Js has to offer in terms routing, image handling and optimizations, in-built optional api right out of the box during project scaffold, the different _rendering _- (ssr, isr, csr) techniques for data manipulation and fetching.

But I was thorn between what I could build with this new found technology and skill I just acquired.

I brainstormed and alas! I decided to replicate as seemly as possible one of my favorite products I began using this year in the same time frame as I have come to found Next.Js - Expensify- an Expense Tracker.

Note:

this is not an ad but it's by far what I have come in to terms with to build, so I could learn the nitty gritty of the Next.Js framework and what it has to offer and how I can leverage that into other similar projects going forward.

Because the app is already a production one, I didn't have to bother so much on design. Thus I referenced the app as my design guide.

The First Steps:

I quickly set up the project scaffold in the getting started section

Then I built the Login page UI - to implementing the AUTH process before anything else.

I didnt want to complicate anything since the main goal is using Next.Js to quickly prototype or build out a fullstack application.
So I leverage the Magic Auth platform to handle user authentication for me during login. I read there is next-auth

- which am going to look into next and see how I can leverage that as well in the same project.

Next up,

is building out the dashboard after a successful user login and redirect to the dashboard. Still using the already built production app as a design guide, I quickly setout to implement the UI first with a dummy data, as this is basically my approach to building out stuffs' as quickly as possible as I can before leveraging dynamic data. Some components has to do with a sidebar, header which display dynamic data based on the navigation items selected - of which I handle perfectly with React useState. The first major thing to implement afterwards was to build the modal that handle the C aspect of CRUD - and this means I will need a database of sort to store my data - so I leverage on Airtable to handle this for me since am also new to Airtable and want to take advantage of this to learn about it as well.

Setting up Airtable was quite straight forward but with a little reading here and there and some figuring outs to do, since its a new technology to me.

The other steps:

I would need to build a user table in Airtable to handle individual users on the app, so when they perform CRUD functions, they will interact only with their data based on their Id's - which am looking forward to using JWT in the process to provide a unique token for each logged in user.

use redux, specifically rtk query to manage application-wide state
add relational database with GraphQL

DEV Community: Kafui Alordo