Posts

Vue router can pass props to the view on invocation. This can be super useful when same views cater to different contexts, and the context is known at the time of clicking URL. Vue router just catches the context and passes it on to the view. For example: if you want to show “My Todos” to all users, and “All Todos” to administrators. Instead of creating two different flavours of the same view, you could incorporate them in one view and pass the context on who clicked the “Todo” link. ...

VueJS has been my ‘go to’ front-end development framework for the last two quarters. I use VueJS with Laravel, FeathersJS and AdonisJS, and cannot just stop loving the development cycle. While you are developing the backend and frontend on same machine, and, if you fly solo - you end up using the same development machine for all purposes. Let’s say - The backend with AdonisJS is at http://localhost:3333 Front-end Vue is served hot at http://localhost:8080 Vue application will talk to back-end Adonis through API calls. This is accomplished through a utility like Axios. ...

Vue router has a simple job - receive client-side requests and invoke the view that needs to be rendered in the browser. That is also a powerful job. Typically, this is what you see in a Vue router - // client/router.js import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; // views! import store from "./store/index"; // store (will be used subsequently) Vue.use(Router); export default new Router({ mode: "history", // include URL in browser history base: "/", // base URL. if your app is at "/app", specify here routes: [ { path: "/", name: "home", component: Home, }, { path: "/todo", name: "todo", component: () => import("./views/Todo.vue"), // lazy render }, ], }); Router is simple and self-explanatory. User clicks on a link on the UI that says “/”, she is taken to Home component. She clicks on “/todo” on UI, browser navigates to Todo. ...

VueJS is massively useful tool. And, I love churning out SFCs like there’s no tomorrow. Vue helps us provide a super user experience. Combine it with Vuetify, Buefy and the like, and you have an application that is loved by all. Except, when the user hits F5 in the browser. Refreshing the browser will reset state. The typical state stored with Vuex is dissolved and may take the auth./login info with it if you have designed auth. in such a way. This is not a good experience for anyone. ...

Lucid ORM, the official ORM of AdonisJS, is based on knex.js. It is one of the friendlier ORMs that provides the ease of using a readable syntax along with a better performance than some of the feature-heavy ORMs. But, I have been recently torn between using one or the other. Consider the below query that fetches a bunch of related fields - const statusByParSub = await Database.select("sub.sub_num", "sub.status_cd") .from("sub") .innerJoin("par", "sub.par_id", "par.id") .innerJoin("users", "par.owner_id", "users.id") .where("par.start_date", ">", queryFilter) .groupBy("sub.sub_num") .groupBy("sub.status_cd") .count(); While the above query is certainly more readable than using a SQL, I doubt whether it can achieve the same level of performance as a raw SQL. The main reasons for the thought process being the layers involved in ORM, the end-query built from 1:M and M:M relationships, and the time that I personally take in creating an efficient ORM vs. writing a raw SQL. ...

Use database migration utilities in Adonis to its complete potential. Carry out incremental updates - may it be a new table, or changes to existing table using distinct migration files that are version controlled. You have a beautiful Todo application that has a todos table with the following columns: description status end_date Now, let’s say our users ask for a new field called planned_end_date. Your first instinct may be to add the column to the database, change controller code if required, and call it a day. But, what if you to start making changes at different times to - ...

Support creation of a single record or a group of records using same business logic and in the same controller in AdonisJS. Typically you create the following controller to handle record creation - // TodoController.js async create({ request, auth }) { const data = request.all(); //single record return await Todo.create(data); } create will happily create a single record as per the input data. What if you want to create multiple records in one go? The first idea that one may have is to handle everything in the controller. Since the business logic is going to remain the same, and there may be a lot of reuse for auxiliary functions, one is tempted to just do the following. ...

AdonisJS stores its configuration values in config folder in root. For e.g. you will set database environment values in database.js, authentication params in auth.js and so on. You can update or set new configuration parameters required by your application in those files. You could also create a new configuration file for your application variables and refer to those values from services, controllers, or from any place where it makes sense. ...

AdonisJS provides a standard way to handle pagination and query only a pre-defined number of records in your query result. A typical controller without any pagination looks like the below - // TodoController.js const Todo = use("App/Models/Todo"); class TodoController { async index({ request, response, view }) { return await Todo.query().fetch(); } } The index method outlined in the code block just queries all records and returns everything to caller. This is good as long as you have limited set of records within your database. If the to do records are in hundreds, thousands or more, you have a problem on your hand. ...

AdonisJS provides a standard way to define a middleware and enable access to routes based on defined validation rules. This middleware is leveraged to allow role-based access to routes. Your start | routes.js file will have something akin to below - const Route = use("Route"); Route.get("/", () => { return { greeting: "Hello world!" }; }); First, we will group routes for the different roles and introduce the middleware. // start | Routes.js Route.group(() => { Route.post("/user-register", "UserController.register"); Route.post("/user-login", "UserController.login"); }); Route.group(() => { Route.get("/todo", "TodoController.index"); Route.post("/todo", "TodoController.create"); }).middleware("auth"); Route.group(() => { Route.delete("/todo", "TodoController.delete"); }).middleware(["auth", "admin"]); register and login methods are available to unauthenticated and authenticated users To do create and index are available only to authenticated users. auth is provided by AdonisJS Deleting to do is allowed only for admin Now, we write the actual middleware for admin. ...