DEV Community: adam-biggs

Will Vue Become the Most Popular Front-end Framework in 2023?

adam-biggs — Wed, 30 Nov 2022 15:27:12 +0000

What Is Vue?

Vue is a model–view–ViewModel front-end JavaScript framework that strongly emphasizes the view layer and supports a component-based architecture.

The framework is an excellent option for creating complex single-page applications (SPA). It also has a progressive design that makes it incrementally adaptable, so developers don’t have to go all-in from the project’s outset. Instead, they can start small by bringing tools or features in as needed and gradually convert their application architecture to leverage Vue.

Vue’s Features

There’s a number of reasons Vue is so popular among the developer community. Specifically, Vue is well-loved because of its:

Low learning curve
Elegant programming patterns
Comprehensive documentation
Ability to enable the creation of lightweight applications
Ease with which it can be incorporated into existing projects

Let’s dig into the core features behind these benefits.

Small Bundle Size

Compared to competing frameworks, Vue has a relatively small bundle size of 18KB. This makes the framework a performant choice for load time, as it can positively impact an application’s performance, Search Engine Optimization (SEO), and user experience.

Component-based Architecture

Because of Vue’s component-based architecture, large and complex sections of code can be broken up into smaller components. What’s more, everything in Vue can be written as a component that consists of HTML, CSS, and JavaScript. This promotes encapsulation, readability, simplicity, and separation of concerns.

It’s Feature-Rich, Right Out of the Box

Vue supports numerous front-end build tools with little-to-no configuration. For instance, Vue supports tools like Babel and Webpack. It also offers server-side rendering (SSR), state managers, configurable and user-friendly routing systems, unit tests, end-to-end testing libraries, and much more.

Ease of Use

Vue was built to offer a great developer experience. It leverages and modernizes the conventional approach to web programming, making it simple for any beginner to get started and feel at ease. It also has a low learning curve and thorough documentation.

Incremental Adoption

Vue doesn’t require complete integration of the framework, making it easy to incorporate into existing projects. So if you decide to use Vue, you can start implementing it in any part of your application.

Comparing Vue and the Most Popular Alternative: React

According to a Stack Overflow survey, 22% of developers say React is one of their most desired frameworks. While React has maintained this status for the last five years, Vue continues to climb the ranks taking third place this year.

Let’s take a look at some of the main differences and similarities between the two technologies.

Background and Development

React is an open-source front-end library developed and maintained by Facebook (Meta). The library offers developers flexibility, simplicity and a rich package ecosystem for building applications. With such a prominent organization backing React, it will likely continue to exist with long-term support.

Vue, on the other hand, was created by Evan You to improve on existing tools from the JavaScript ecosystem. He had a goal to develop a framework that combined the best front-end development strategies from Angular, Ember, and React, along with additional features to make developing web apps quicker, simpler, and overall a better experience for developers.

Vue and React Syntax

A significant difference between Vue and React is the construction of the view layer. Vue, by default, supports the usage of HTML templates. The usage of the traditional separation of concerns by dividing the logic into HTML, CSS, and JavaScript in Vue makes it simpler for front-end developers of all skill levels to understand how to build web applications. Some web designers are also knowledgeable in HTML templates, which helps facilitate communication between developers and designers.

In contrast, the default way of building the view layer in React is by using JSX, which merges HTML and CSS into JavaScript. This can erode the separation of concerns but can help co-locate all the relevant logic into one location.

Below are more key differences, benefits, and uses of each React and Vue:

While there are some differences, Vue and React share key characteristics. For instance, both platforms:

Make use of a virtual DOM
Are performant
Leverage modular view components
Consist of a core library and let companion packages handle issues like routing and global state management

Vue Usage and Popularity Compared to React

The Jet Brains Dev Ecosystem 2021 poll found that developer proficiency with the two frameworks, and frequency of use, were high, with Vue being on the rise. In a year-over-year comparison, Vue users increased from 34% in 2020 to 43% in 2021, while React users decreased from 64% to 49%.

The State of Vue in 2022

As Vue continues to gain popularity, more companies are adopting the framework into their organizations. Usage climbed from 10% in 2016 to 51% in 2021, among these users are large-scale companies like the media behemoth NBC and the American university MIT.

Large-Scale Companies Using Vue

Vue is popular with a number of large organizations. Adobe, Netflix, and Nintendo are some more well-known tech companies that use Vue. Here is a quick look at the tools these companies are leveraging Vue for:

Adobe: Adobe Portfolio, which enables users to build custom websites via online portfolios.
Netflix: The Netflix team uses Vue for certain internal apps, including some crucial cloud tools relating to the administration and operation of infrastructure.
Nintendo: Vue is used by the video game giant on a few regional European websites, including those for Germany, France, Spain, and the UK. My Nintendo and the Nintendo rewards program for game accounts use Vue as part of its architecture.

Industries Utilizing Vue

According to Enlyft, Vue’s customers by industry are largely made up of Information Technology and Services (20%), Computer Software (15%), Internet (7%) and Marketing and Advertising (5%).

Apps Made with Vue

Vue’s powerful features, like its small bundle size, server-side rendering, and progressive adaptation, make it suitable for creating various applications. Some examples include:

Single-page (SPA) applications, such as social networks
Microblogging services, CMS, etc.
Sites that need to support high load
Online stores
Information portals and dashboards
Application forms

Vue Resources

Vue features a sizable number of educational resources and how-to guides, a thriving forum, international conferences, and an ever-growing presence on GitHub. The framework’s creator is also heavily involved in the community, and it’s not uncommon to get a response from him if you post a question or start a discussion on the official forums.

If you would like to learn more about the future of Vue, the current hiring demand for Vue developers, or about Nuxt / Nuxt3, I would highly encourage you to read the rest of the article my colleague Eduardo wrote here.

Three Questions to Answer Before Choosing Web3 for Your Next Project

adam-biggs — Fri, 04 Nov 2022 14:44:11 +0000

Web3 promised to be a revolution that would forever change the way we interact with the web. Its inception caused a sort of gold rush: entrepreneurs founded startups to build the Web3 version of everything out there, investors funded what felt like every Web3 project put in front of them, and developers chased juicy salaries and options packages in the hot new space.

But the romanticism of Web3 has faded, and somewhat dramatically. A weakening economy had VCs pumping the brakes on new technology investments, especially in the volatile Web3 domain. Even large, seemingly “safe” Web3 companies, such as those in the business of crypto wallets and online trading platforms, underwent massive layoffs. Recently, its left many developers, and the broader tech sector, wondering what kinds of products and services actually did fit into the Web3 infrastructure.

1. Is an Immutable Ledger the Best Fit for Your Back-end?

The defining technology of the Web3 platform is the use of a Blockchain, which is a data structure that keeps records of transactions as a ledger. Unlike traditional data storage solutions that allow for CRUD operations (Create, Read, Update, Delete), blockchains are designed to be immutable. You can’t edit or delete information from them, only add new information at the end. This makes it a great fit when traceability is needed, as no one will be able to modify the data in any way.

When considering Web3 for your next project, the very first thing that you should ask yourself is: will my project benefit from having an immutable ledger at the core of its back-end?

If, when you ask yourself this, you determine a traditional CRUD application would work better, building in Web3 will likely not be the best idea.

2. Does Your Back-end Work Best as Decentralized Computing?

The second most important feature of blockchains is their decentralized nature. Decentralized means that control over actions is distributed across many entities, rather than a single centralized entity. The main benefit of decentralization is that more power is given to the participants of a system, rather than in a single large entity.

But there’s another huge benefit, which is that decentralized computing has very high availability. A centralized system has a single point of failure, whereas a decentralized system has many backups for a process.

Although decentralization can be a benefit for availability, it can also have potential impacts on scalability and transaction times.

The question you should ask is: is my project’s need for high availability outweigh the importance of response time to users?

3. Do You Need Scalability or High Transaction Volumes?

One of the biggest challenges for Web3 is the limitations of the network, both in speed and energy consumption.

Blockchain transactions are slow and incredibly resource-intensive by design due to the algorithms that maintain a consistent state throughout the network. A single Bitcoin transaction consumes more energy than 1.5 million VISA transactions.

In some cases, though, Web3 is improving in energy efficiency. Recently, Ethereum completed a merge that reduced its energy consumption by around 99.95%. This improvement is significant in reducing the impact of blockchain applications, providing an overall more environmentally friendly model.

Although energy efficiency has improved in some cases, it is important to note that blockchain is slow. Transactions take 5 seconds to be recorded, and the blockchain has a very tight processing power of 7 to 15 transactions per second. This may sound like quite a bit, but it’s important to put things in perspective: VISA regularly handles 24,000 transactions per second.

When you consider scalability and transaction, you should ask yourself: Do you need the core of your application to be able to handle many users making requests at once? If your answer is yes, Web3 is likely too slow for your use case.

Is Web3 Right for Your Business?

If you would like to learn a bit more about Web3 and how it compares to Web2, I'd suggest checking out this article written by my colleague, Raul: https://www.scalablepath.com/back-end/choosing-web3-for-software-project

Context API vs Redux: Managing Data Flow Through Nested Components in React

adam-biggs — Tue, 25 Oct 2022 14:48:22 +0000

Web application development is in a constant state of flux. While there are many front-end libraries and frameworks that focus on component-based architecture, Vue, Angular and React are, without a doubt, some of the most popular options. Of these, React is one of the most widely used client-side component/view libraries.

Using components is a great way to structure web applications because they make it easier to reuse code. However, as the number of components grows, managing the communication and data flow between them becomes complex.

How Data Flows Through React Nested Components

Typically, the communication pattern of a JavaScript framework is to pass data from parent to child components.

Data flow can be complicated to manage, especially with a deeply nested tree of React components. That’s because data passes through every nesting level, including components that don’t need it. This pattern is called prop drilling and it can become a challenging architectural problem for developers to tackle.

There are two primary tools In the React ecosystem that offer solutions to this challenge: Redux and Context API. In this article, we’ll unpack both technologies to understand how they manage data flow and determine if there is a clear choice for using one over the other.

What Is Redux?

Redux is a library for managing and updating the application state using events called actions. It’s a centralized store that’s shared across the entire application and ensures that the state gets updated in a predictable fashion.

The patterns and tools provided by Redux make it easier to understand when and how the state in the application is updated and how its logic will behave when the update occurs. With this, Redux makes it easier to write predictable and testable code.

Also, Redux leverages React Context. In earlier versions of React, Context was still an experimental feature and intended to manage the global state, just like Redux state.

How Does Redux Work?

Redux is an implementation of Flux and consists of four key parts organized as a one-way data pipeline:

The View dispatches actions that describe what happened. Then, the Store receives these actions and determines what state change should occur. After the State updates, the View is rendered with the new state.

The Store is where the state is managed centrally. It’s responsible for maintaining the state and receiving actions from the View.

The Store handles the state updates with a function called Reducer (a function that receives a state and a dispatched action from the view to return a new state specified by the action). It’s important to note that reducer functions must be pure, meaning the State has to be treated as an immutable object and can’t be manipulated directly.

The View needs to re-render after the update because the State is being modified outside of React. The store implements the observer pattern with an array that uses a subscribe method to add a new listener and call each listener function whenever the state changes.

In the View, we can subscribe to our component when it mounts. The listening function that we pass to subscribe() will call this.force_update() and will trigger a re-render of the component. The view mentioned above is the one in Flux architecture, but when we put it in the React ecosystem the view is contained in the React component.

Benefits of using Redux

If you choose Redux for your project, some key benefits are:

It increases the predictability of a state: Since reducers are pure functions, they always produce the same result when the same action or state is passed to them.
It’s highly maintainable: The structure of any Redux application is relatively standardized since code organization follows strict guidelines with this library.
It prevents re-renders: The state is treated as immutable. The new state is derived from the old one using a shallow copy. This reduces the probability of re-renders substantially, therefore having a positive impact on performance.
It makes debugging easier: By logging actions and the state, Redux makes it easy to have insight into what happens during the lifetime of an application. It has excellent DevTools that allow us to time-travel actions, persist actions on page refresh, etc.
It’s useful in server-side rendering: The usefulness and effectiveness of Redux in server-side rendering are also well-proven. Handling the initial render of an application is relatively easy with Redux.
It’s easy to test: Redux relies on pure reducer functions. It’s easy to test pure functions since they always return the same output given the same input.

What Is Context API?

Context API is a different approach to tackling the data flow problem between React’s deeply nested components. Context has been around with React for quite a while, but it has changed significantly since its inception. Up to version 16.3, Context was a way to handle the state data outside the React component tree. It was an experimental feature not recommended for most use cases.

Initially, the problem with legacy context was that updates to values that were passed down with context could be “blocked” if a component skipped rendering through the shouldComponentUpdatelifecycle method. Since many components relied on shouldComponentUpdatefor performance optimizations, the legacy context was useless for passing down plain data.

The new version of Context API is a dependency injection mechanism that allows passing data through the component tree without having to pass props down manually at every level.

The most important thing here is that, unlike Redux, Context API is not a state management system. Instead, it’s a dependency injection mechanism where you manage a state in a React component. We get a state management system when using it with useContextand useReducerhooks.

How Does Context API Work?

Context API is quite simple. You only need to create a state context using the function createContextand it will return a provider and a consumer. The provider wraps the component tree where you expect the descendants to consume the state. The consumer is the wrapper for the location where the state data is used.

Benefits of using Context API

Here are some key benefits of choosing Context API for your project:

It’s scalable. Context API can be used for any size of web application.
It’s less complex than Redux. The workflow is much simpler than Redux. It doesn’t involve the additional parts or boilerplate that Redux requires.
It has a lower implementation cost. In cases where we only use it to avoid prop drilling, we can put aside the implementation of reducers.
There’s no need to pass data to the children at each level. The Consumer component can access all the data provided by the Provider Component at any level. This prevents prop drilling.
It’s easy to maintain and very reusable. As no prop drilling takes place, if we remove a component from the tree or place it to another level, those components below will not be affected.
Integration of React’s modules is seamless. Because it’s part of the core React library, we don’t need to install, import or maintain any additional libraries.

Context API vs Redux: When to Use One Over the Other

As Context API and Redux are ultimately used to build web applications, the three main goals are:

A fast response time
Easy to develop
Easy to maintain

This post was created using parts of an article my colleague Andy Fernandez wrote. If you would like to learn how Context API and Redux compare, I would highly encourage you read the full article here: https://www.scalablepath.com/react/context-api-vs-redux

My Week With GitHub Copilot: AI Pair Programming Review

adam-biggs — Mon, 24 Oct 2022 18:39:08 +0000

Before text and code editors, developers were tasked with having the correct code passed to a compiler. Now, support tools like syntax highlighting, function syntax assistance, autolinting, and Artificial Intelligence (AI) assistance are available directly in your Integrated Development Environment (IDE) or the editor where you code.

Now, there’s a tool that promises to improve the developer experience even more: GithHub Copilot, an AI pair programmer. After a year of closed beta, GitHub Copilot is now publicly available to developers and is gaining a lot of attention for its ability to enable developers to harness AI while writing code. According to GitHub, developers can write a comment describing the logic they want and GitHub Copilot will automatically generate a code suggestion for their solution. It sounds pretty cool, right? Our team thought so, but we had some questions, for instance:

Does GitHub Copilot really speed up daily work?

Are the suggestions valid, or just noise for the developer?
Is it worth a freelance developer paying for it?
Is it worth companies paying for it for their team members?
Does it make you less of a developer if you use a tool like this?

OK, that last one might be a bit philosophical, but the others felt testable. So, to get some answers, I put GitHub Copilot to the test. In this article, I’ll share my experience after one week using the tool and dive into key findings from this trial period. I’ll also use my 20+ years of experience as a Senior Full-Stack Developer to compare it with my day-to-day before Copilot. Hopefully, my experience will give other developers a better understanding of how this tool works and if it lives up to the hype.

What Is GitHub Copilot?

To understand how Copilot came to be, it’s first important to understand pair programming.

Pair programming is an extreme programming technique where two developers work together on one computer, one acting as the pilot and the other the copilot. The pilot is on the keyboard while the copilot helps navigate, checking the logic and patterns, while weighing against alternative solutions. While two developers producing one piece of code sounds expensive, the quality of the final work can help avoid added costs of code review and QA.

It was from this idea that AI pair programming came to life. Officially launched in June 2022, GitHub Copilot is an AI pair programming editor that suggests code in real time to help developers work faster and more efficiently. It’s powered by a new AI system, OpenAI Codex, and translates natural language to coding prompts as developers write a comment or a line of code. While it’s free for students, it’s $10/month or $100/year for developers (with a 60-day trial).

Now, with that background covered, let’s dive into some key findings from my week with GitHub Copilot. I’ll run through the installation, testing and how it looks in action.

Initial Tests

To have a consistent testing environment, I set up two directories: one with plain JavaScript (no dependencies) and one with a Next.js application, so I could play around with React and an established React framework briefly.

Plain JavaScript

In an empty .js file, I started typing to create a simple function to convert from hex color to rgb. This is a common feature – most of us know the concept of converting hex numbers to integers – but let’s be honest, most developers don’t have solutions memorized. And unless there’s a library in the system, we’ll search for the simplest solution, validate and move ahead.

Using Copilot, here’s how it can be achieved:

Cool, right? Notice that I ignored the first suggestion as it looked too complex. I was writing a basic test with a sample color and I only had to hit Tab.

React in Next.js

This is a more complex test, but let’s keep it simple for now. Here’s a test page, but nothing specific from Next.js:

There’s a mix between GitHub Copilot and the IDE’s code completion. Do you notice a small delay to display the suggestion? This may be because it’s too vague, but it’s hard to tell. GitHub Copilot’s suggestion is okay, and it also offers an export default, but it isn’t needed in this case.

The code above is enough to test the environment. Out of curiosity, let’s see how it looks if we hit Ctrl + Enter:

You can also use Alt + Tab, of course.

We’ve completed the dummy tests. Next, let’s see GitHub Copilot in action.

Real-Life Action

My current project, where I’ll be using the tool, has Laravel on the back-end and React on the front-end.

Starting with Back-end Code

I only had back-end work on my first day using Copilot, so my expectations were low (no optimization for PHP, remember?)

Note that the tasks were related to the Laravel framework: a modern PHP framework and VSCode with some very established extensions that are able to complete “use” statements and pop up PHP function parameters. Prettier, the code formatting tool I mentioned earlier, alerts me about silly syntax mistakes at saving. In my day-to-day, I purposely avoid indenting code; that way, if Prettierdoesn’t auto-adjust for me at save, I know it’s not working and I have something to fix.

Complete the Line

The first effect is “filling in the blanks” suggestions. This is similar to Google’s auto-suggest function, where typing in Gmail or Google Docs will recommend words or phrases to finish a sentence for you. Copilot shows obvious completions, like end-of-line semicolons or closing brackets/parentheses.

Verdict: GitHub Copilot is helpful in this case, but not impressive. To compare, Prettier does the same at saving, while also automatically indenting your code.

Variable Filling

When you use a function, GitHub Copilot suggests what variable to fill in depending on your context.

This suggestion is 99% of the way there in my context, but the correct answer is:

Verdict: Okay, GitHub Copilot, you won this one.

Message Suggestion

This is a common pattern. You make an early condition to check user access and throw an exception returning a message:

This doesn’t come from external code, but it used my context to suggest an especially useful message. So GitHub Copilot not only knows I need to fill a message, but also an authorization message that should be inferred by the previous code.

Verdict: For those not used to Laravel, it’s a pretty common pattern to get the current user. So this is amazing functionality!

Library Discovery

I was working with the Cloudinary API through their PHP library. The code is supposed to be different depending on the mimetype. Then I get:

The case syntax isn’t impressive as any IDE snippets plugin can do this for any language. But, the mime type goes deeper: it considers the function name to infer the related mime type (video/mp4). The cloudinary_php suggestion looks impressive, but it’s not correct. I could actually write a code like this in some situations, but the solution I need is very different. And so I still have to check the API reference to get my final solution.

Verdict: Developers won this round. Sorry, Copilot.

Model/Database Suggestion

In this example, there’s a switch syntax building a custom filter for the Booking model in Laravel. After pressing Enter, Copilot suggests a real field. But wait, this isn’t on the active file!

When I accept by hitting Tab I get:

This is pretty much the answer, except $value[‘id’] should be $value.

Verdict: It’s not 100% correct, but it saves time because I need to type less and only requires a minor tweak. It’s pretty useful.

Alternatives to GitHub Copilot

Are there any worthy alternatives to GitHub Copilot?

The short answer: at the time of this writing, the only alternatives are Tabnine and Amazon CodeWhisperer (the latter just launched a preview).

The long answer: OpenAI Codex started as an open-source project that would allow, in theory, many tools to use its base to create various alternatives. But this is not a cheap enterprise! They recently moved to a more traditional closed business model and received a strong investment from Microsoft, which owns GitHub.

Some open-source projects started using the remaining open-source training model, but most are stalled. Unless they were to receive funding, it would be pretty hard to achieve the same level of efficiency GitHub Copilot offers now. The latest version of its model is now available for licensing, preferably by Microsoft. As other companies can license OpenAI Codex, it’s possible we will have more alternatives in the future.

Tabnine aims to provide a similar product and already has a customer base (they claim to have more than 1 million developers using their product). They stand for using only open-source code with permissive licenses for their Open Source Trained AI model (MIT, Apache 2.0, BSD-2-Clause, BSD-3-Clause) from GitHub repositories or customer’s repositories/local code. You can also download the model to your machine and get even faster responses. Their Pro subscription comes in at $12 US per month.

In June 2022, Amazon launched a preview of CodeWhisperer, another tool similar to GitHub Copilot. This seems to be a legitimate competitor, but there’s not enough information to compare them so far.

It’s likely that we’ll have more competitives to evaluate in the future. For now, we’ll say it’s “to be continued…”

Addendum: FauxPilot is an open source project that aims to run a model locally, using a Nvidia GPU to process the data, and VSCode GitHub Copilot plugin itself.

Key Takeaways from My Week with GitHub Copilot

GitHub Copilot certainly has its strengths and weaknesses. Here’s a roundup of key takeaways from my trial period with the tool:

Fewer Browser Searches

With GitHub Copilot, I don’t need to switch to the browser to search as often. Common functional solutions are available after a few words + Tab, and established patterns used in the most used frameworks/libraries are there, too. It’s a great time-saver.

Context Matters

My expectation of how Copilot should work was wrong. At first, I thought it was an “ask me something and I return some options” kind of flow. But even if I don’t ask anything, I still get impressive suggestions in the context of my work.

“Context” is key here. The AI considers factors like the frameworks or libraries in use, the variables in the current file, and related files and scope in order to produce better suggestions. Patterns are also considered in part of the answer as well. When you embrace the technology and understand its strengths and weaknesses, you start to get more out of it without changing your flow.

It’s Best for Experienced Developers

Although AI assistance might look like a good learning tool, it’s not. Code suggestions are just that: suggestions. The developer needs to be able to evaluate these suggestions and choose to accept, skip, or ignore them. In order to use the tool properly, it’s necessary to know the context, logic, and expected output to make a smart (and fast) decision. Otherwise, the suggestion can create errors.

GitHub Copilot actually confirms this insight. The GitHub Copilot FAQ entry Fairness and broader impact states that “inexperienced developers may struggle to use GitHub Copilot to effectively generate code, and their lack of experience might inhibit their capability to effectively review and edit suggestions made by GitHub Copilot.”

Verdict: It’s Worth the Money

From my time using the tool, I concluded that yes, GitHub Copilot is worth the cost, and here’s why:

You switch less to the browser for searching solutions, saving tons of time.
You type less with smarter code completion than your IDE offers.
You get tiny boosts with contextualized solutions that sum up at the end of the day.
You can focus on the bigger picture, architecture, and integration.

Given the rates most software developers are making these days, I think that if this tool saves you even one minute per day, the $10 monthly fee easily pays for itself. In reality, I think you save a lot more time than that, and what you get out of the tool increases with use (you get used to learning how to get better answers). Sounds like a good deal to me.

Final conclusions

Developers aren’t encyclopedias. Even recent solutions we’ve worked on aren’t always readily available in our brains. It takes a lot of searching and research for small solutions, like a for/foreach pattern ten-line function created five years ago for a dead project. The majority of problems that have to be solved every day have already been solved many times over and are available as question-and-answer forums or public code from open source projects.

An AI-powered tool like GitHub Copilot can speed up daily work and bring so much knowledge to your fingertips in your IDE, but it won’t do the job for you. At the end of the day, developers are still responsible for delivering the work even if they use AI assistance. With that said, advanced tools like this won’t make you less of a developer, but they will improve your productivity.

For decades, companies have been trying to automate coding. And, although many common programming activities were automated, abstracted or simplified, real people still need to do the work. Maybe in the future we’ll need another kind of programming, but at least for now, there still needs to be someone’s actual brain in action to solve humanity’s problems.

Final tips for using GitHub Copilot:

Don’t try to follow GitHub Copilot. Instead, let it follow you.
Be suspicious of long suggestions. It’s easier to get fooled by them.
Don’t trust by default. Read the suggestions and be sure they make sense.
Context matters a lot. Give Copilot as much context as possible by keeping related files open to get wider contextual suggestions.

And remember: GitHub Copilot is AI. Ultimately, you’re in charge and responsible for the end work.

This post was created using parts of an article my colleague, Rafael Goulart, recently wrote. If you would like to learn more, I high recommending reading his full review here: https://www.scalablepath.com/full-stack/ai-pair-programming-github-copilot-review

GraphQL API Integration for Full-Stack Apps with PostGraphile

adam-biggs — Mon, 24 Oct 2022 14:20:01 +0000

In part two of this tutorial series, we’re going to look at the key features of GraphQL and how to integrate it with PostGraphile to enhance the back-end of our full-stack application.

In part one, we covered how to approach building a GraphQL API with TypeScript and Node.js as well as the key benefits of this architecture. If you missed it, check out how we set up the project and bootstrapped our code by installing dependencies and configuring our data model.

What is GraphQL?

In a nutshell, GraphQL acts as a layer to fetch and mutate data. It’s language-agnostic on both the front and back-end (e.g. JavaScript, Java, C#, Go, PHP, etc.) and serves as a bridge between client and server communications.

The goal of GraphQL is to provide methods for retrieving and modifying data. To provide this function, GraphQL has several operations:

Queries: for performing data fetching operations on the server.
Mutations: analogue to the standard CRUD (Create, Retrieve, Update, Delete) operations, except for the Retrieve (for which Queries are responsible in GraphQL).
Subscriptions: conceptually, subscriptions are like Queries in that it’s utilized to fetch data. It may maintain an active connection to your GraphQL server to enable the server to push live updates for the subscribed clients.
Resolvers: Resolvers are implemented in the back-end as handlers for the lookup logic for the requested resources.

It’s important to mention that GraphQL isn’t a framework/library, nor a database implementation/query language for the DB. Rather, it’s a specification powered by a robust type system called Schema Definition Language (GraphQL SDL) described in its specs. It serves as a mechanism to enforce a well-defined schema that serves like a contract establishing what is and what isn’t allowed.

It’s a wrong assumption to think that GraphQL is a database implementation or a query language tied to any particular database. Although it’s common to see that being translated to DB interactions, it’s possible to use GraphQL even without having any sort of DB (ex., you can set up a GraphQL layer to expose and orchestrate different REST APIs endpoints).

Using PostGraphile to Integrate with GraphQL

There are a few ways to set up a GraphQL API in Node.js. These options may include:

Apollo Server
Hasura
Prisma
PostGraphile

Alternatively, you can build your own server with custom resolvers and a schema definition. While there are pros and cons for each method, we’ll use PostGraphile in this tutorial. We’ve made that choice because it provides an instant GraphQL API based on the DB schema.

What Is PostGraphile?

PostGraphile is a powerful tool that makes it easy to set up a robust GraphQL API relatively quickly. According to the official documentation:

“PostGraphile automatically detects tables, columns, indexes, relationships, views, types, functions, comments, and more — providing a GraphQL server that is highly intelligent about your data, and that automatically updates itself without restarting when you modify your database.”

This makes PostGraphile a great option for developers because it enables them to build fast, reliable APIs. Some of the key features that make this possible are:

Strong PostgreSQL support
Use of GraphQL best practices
Simplicity to deploy and scale
Customizability
Impressively high performance
Granular authorisation via RLS
Open source under MIT license
Powerful plugin system

Configuring PostGraphile

There are two ways of integrating PostGraphile into our project: via PostGraphile CLI or through a middleware. For this project, we’ll use a middleware.

Now that we have an overview of GraphQL and how PostGraphile can be helpful in our demo project, let’s go ahead and install the PostGraphile dependency in our project.

npm install postgraphile@^4.12.9

To use PostGraphile in our application, we need to import it like our other dependencies. The import can be added to the top of the App.ts file:

import postgraphile from 'postgraphile'

After that, all we need to do to complete the setup is to enhance our App.ts and bootstrap our Express server with PostGraphile Middleware. To do that, replace this code section:

/**
* This is our main entry point of our Express server.
* All the routes in our API are going to be here.
**/
const App = () => {
 const app = express()
 app.use(express.json())

With this:

const pgUser = '*** INSERT YOUR POSTGRESQL USER HERE ***'

/**
* This is our main entry point of our Express server.
* All the routes in our API are going to be here.
**/
const App = () => {
 const app = express()
 app.use(express.json())
 app.use(postgraphile(`postgresql://${pgUser}@localhost/catalog_db`, 'public', {
   watchPg: true,
   graphiql: true,
   enhanceGraphiql: true,
 }))

We’re basically configuring the PostGraphile middleware in our server.

Now, if you restart the server and hit the http://localhost:8090/graphiql in your browser, you’re going to see some really interesting stuff! We’ll dig into all of that in the next section.

Note: if, when restarting the server, you see:

“Failed to setup watch fixtures in Postgres database”
“A serious error occurred when building the initial schema. Exiting because retryOnInitFail is not set”

Then make sure the user specified in the const pgUser = is valid and that you have the admin privileges for changing the Postgres DB Schema.

GraphQL Playground

GraphQL Playground is a sort of IDE for exploring and interacting with a GraphQL server. It comes with an interactive UI that can run on the browser to where you can build and test queries/mutations and explore the GraphQL schemas.

What you are seeing is an enhanced version of GraphiQL shipped with PostGraphile. While it’s out of the scope of this tutorial to dive deep into the GraphQL playground, we’ll cover some of the key features that it provides.

GraphQL API Documentation

Our GraphQL Playground can also serve as an API documentation with the powerful schema introspection feature. Let’s take a look.

First, in the top right-corner, click on the “< Docs” option. This will open the Documentation Explorer:

There are two root types enabled: Query and Mutation. Let’s explore the Query type.

If you scroll down, you’ll see many options available to use. In TypeORM, we defined the entities to be added to the PostgreSQL server. The PostGraphile middleware is able to automatically expose these entities to GraphQL, allowing us to access them through GraphiQL.

Let’s take a look at the allCategories query as an example:

By clicking on the allCategories hyperlink, you can see the details of that query:

This window displays the different methods you can use to work with the query results.

Notice that GraphQLsupports Cursor (after, before) and Offset (first/last, offset) based pagination, Ordering and Filters (condition), with all of that supported out of the box!

As for the Mutation type, you have access to create, update and delete utilities for all of our entities!

In the following sections, we’ll explore some of the fundamental features of a GraphQL API: writing Queries and Mutations.

Note: this article is not going to cover all the details of writing Queries and Mutations. If you’re interested in this, there are some great resources on the official GraphQL Foundation website.

Want to learn more? I would highly recommend this article: GraphQL API Integration for Full-Stack Apps with PostGraphile [Tutorial Part 2]