DEV Community: The Method Coder

🔥 Debugging Frontend Apps inside VS Code!

hexrcs — Wed, 22 Jan 2020 09:19:15 +0000

Did you know that we can also debug client-side, frontend code right from VS Code, using its powerful built-in debugger? 🤯

In this 94-second video, we'll use the Chrome debugger extension to debug an event handler in a React app.

Although the demo is in React, the same knowledge applies to any frontend apps! 🥳

This video is part of my new 6-minute crash course series on YouTube 👉 Debugging in VS Code 🔥

Like this video?

I'm also on Twitter: @hexrcs
Check out my YouTube Channel: The Method Coder
You can find me at my homepage as well: xiaoru.li

💪 React + MobX Crash Course (in 5 pics!)

hexrcs — Tue, 03 Dec 2019 13:25:39 +0000

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1201593792417144833

State management in React apps can be a hard thing to do.

Are you having a hard time wrapping your head around React state management, and getting tired of writing boilerplate for Redux?

Let's check out MobX - everything becomes so simple and effortless 😃

👇 Here's a 5-minute React + MobX crash course for you! 🥳

1 - MobX Concepts

MobX is a "reactive" state management library.

We directly mutate the state. Because we use MobX to observe and track mutations, the UI will be auto-updated, like cell updates in Excel. Network requests can also auto-send when conditions are met.

Everything is automatic!

2 - Decorator and observable

We normally use the decorator syntax to mark fields in a class "MobX observables" - easy to use or read. This way, normal JS stuff gets "enhanced" (eg. a JS number becomes an observable that can be tracked).

Grouping state logic in a "store" also makes our code more modular.

3. Action and Computed

In addition to @observable, we also have:

@computed - derived state from other observable/computed that can be used just like observables. Getter syntax is required. The derivation is automatic.

@action - batched state mutations. Reactions will only be triggered by the update when the action completes.

4. Reactions

We can use autorun() or when() to watch observables and perform effects when there's update

autorun() takes a callback and runs it each time any observable used in it gets updated. (Remember to do the clean-up!)

when() only runs the callback once, when a condition is met.

5. Using MobX with React

mobx-react binding lets us use MobX with React without writing autorun functions to rerender components.

We use @observer as a decorator to a class component, or HoC wrapping a function component. This creates an observer component that tracks observables needed during render, and auto rerenders whenever an update is observed.

Summary

And that's it, everything you need to start using MobX effectively. Pretty effortless, isn't it? 😃

If you are curious how MobX works under the hood, check out this amazing talk "Reinventing MobX" by Max Gallo.

Credits

Thank you so much Michel Weststrate for creating this amazing library, and helping to review this crash course! 🙌

(Thread crash course format inspired by Chris Achard 😁 Check out his excellent React/Redux, Git crash courses!)

While you are still here, if you've got 13 more minutes and are interested in learning the new hot framework Svelte, I've also got a crash course with companion videos here 👉 Svelte Crash Course 🔥

I've also got another GraphQL Crash Course 🔥 👈 Check it out!

Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage: xiaoru.li

🔥 GraphQL Crash Course (in 10 pics!)

hexrcs — Sun, 03 Nov 2019 10:34:24 +0000

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1190332090149150720

Always wanted to use GraphQL for your new projects, but never got time to learn how it works? 😃

Let's start the week with some new GraphQL knowledge in hand! 🙌

👇 Here's a 10-minute GraphQL crash course for you! 🥳

1 - How GraphQL works

GraphQL is a query language for making flexible API calls.

We describe what we want in a single request with nested fields, then we will receive a data payload of the exact shape.

No need to make many small requests to stitch data together or over-fetch unwanted parts!

2 - A GraphQL Query Exchange

GraphQL is not a library, but a language spec.

We send structured queries as POST or GET requests. The server checks if they're valid with a predefined schema, runs corresponding resolver functions to perform operations, then prepares the data to be returned to the client.

3 - The GraphQL Schema

GraphQL schema defines the structure of valid queries and the return data types of them. It's the protocol the client & server use to communicate under.

They're strongly typed, can be nested. In addition to the most common "object" types, the schema also supports unions, enums, interfaces, etc.

There are 3 operation types in GraphQL - query, mutation, or subscription. query is the most commonly used operation.

4 - Argument

Some queries allow us to pass in arguments in order to eg. filter results. The schema defines all valid arguments.

On the backend, we need to have corresponding resolvers to fulfill those conditioned queries.

NOTE: GraphQL has no builtin comparison operators or functions like > or TOP, LIMIT in SQL! Those additional features must be implemented in the resolvers. Most GraphQL frameworks however already ship with those utility resolvers.

5 - Alias

Sometimes in a query, we select the same field multiple times, but each time with a different argument (like in the pic). This will cause naming conflicts, so we need to assign aliases to the fields.

Aliases can be added to any field.

6 - Fragment

We can wrap "subfields" into a Fragment and reuse them with the spread operator in selections. Useful when we select the same fields over and over again. Think of it as a JS object for GraphQL field names that can be destructured!

The Fragment is sent to the server alongside the main operation in the query field of the HTTP request payload.

7 - Variable

Using GraphQL variables makes it easy to modularize and share/reuse our prewritten query code. We declare them at the beginning of a query, and are allowed to assign default values to them. The variables can be nested, just like a normal JSON object.

Noticed the GraphQL request payload in the pic of section 2 - A GraphQL Query Exchange? This is what the "variables" field is for.

8 - Interface

Interfaces in a GraphQL schema allow us to flexibly create and use complex data types in an OOP manner.

Types can implement (multiple) interfaces.

When the return type is an interface, we can use the on keyword to conditionally access fields of a specific implementation.

9 - Mutation Operation

Contrary to queries, a Mutation operation is used to change the serverside data - eg. to create an account, generate auth token, or add data entries.

Like queries, we can supply arguments to a mutation. The mutation also returns value, so don't forget to select the fields we need!

10 - Subscription Operation

Instead of sending queries over HTTP back and forth, GraphQL also has a Subscription operation type for creating WebSocket connections, so the server can push continuous updates to the client.

Particularly useful for real-time apps like 💹 stock market or 💬 messaging apps.

BONUS

Online Playgrounds

Many GraphQL frameworks come with a web IDE with autocompletion support and interactive schema lookups like GraphiQL or GraphQL Playground. Make use of them when debugging your queries! ✨

You can also create your own playground online with CodeSandbox by selecting the Apollo GraphQL Server sandbox.

However, if you are as lazy as me 🤪, there are also a few zero-config public GraphQL APIs to play with online 👉 https://apis.guru/graphql-apis/

Additional Resources

There's a great episode on GraphQL from the Ladybug Podcast, do check it out!

I hope you have enjoyed this GraphQL crash course! 😁 Have a great and productive week ahead! 🙌

(Thread crash course format inspired by @chrisachard 😁 Check out his excellent React/Redux, Git crash courses!)

Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage: xiaoru.li

⏰ Svelte Crash Course (in 10 pics!)

hexrcs — Sat, 19 Oct 2019 19:58:42 +0000

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1185186492982943744

Huge Update: Video Version Now Available!

👉 YouTube Playlist - Only 13 minutes in total! 🥳

Always wanted to check out Svelte (aka. "the next big thing in web dev") but never got time for it? ⏰

🔥 I've got a 10-minute crash course for you! 👇

(Spoiler alert: Svelte is so intuitive and easy to use that you may feel like you already know it! 🥳)

1 - How Svelte works

Compiler: Doesn't ship a Svelte "library" to users, but build-time optimized plain JS
Components: App is made up of composable UI elements
Reactive: Event/User interaction triggers chain of state changes, auto-updating components throughout the entire app

2 - UI Is a Component Tree

A component defines how your app should interpret some abstract "state" values, so that it can turn them into DOM elements in your browser, and ultimately pixels on your screen.

3 - The Anatomy of a Svelte Component

Each .svelte file contains a single component, consisting of 3 parts:

<script> is component logic in JS
<style> is CSS styling, scoped and applied to only the current component
Svelte template, based on HTML but can use custom components and inline logic (like JSX)

4 - The Svelte Template

The Svelte template allows us to use our own custom components in addition to HTML elements. The .svelte file extension is optional if there's no ambiguity, but the first letter of a custom component MUST be in uppercase.

We can use JS expressions inside curly braces { }.

5 - Setting "Props"

A common way to "control" how a child component behaves is to pass data into it as props (properties).

To accept a prop, expose a variable with export. It's important to use let because const is not reassignable.

Setting a prop is just like doing regular HTML.

6 - Updating Component States

User actions trigger events. on: lets us listen to events and fire functions to update states. State changes will auto-update the UI.

Data generally flows from a parent to a child, but we can use bind: to simplify the state-update logic by allowing two-way data flow.

7 - `$:` Reactive Statements

"Reactive statements" are those statements marked by $:.

Svelte analyzes which variables they depend on. When any of those dependencies changes, the corresponding reactive statements will be rerun. Very useful for declaring derived states, or triggering "side effects".

8 - Reactive State "Store"

A reactive "store" makes it easy to share states across many components. It can exist in a separate JS file. To create a store, just wrap writable around a value.

In a component, we prefix store names with a $ in order to directly use or update them. Compiler magic!

9 - Conditional Rendering And Lists

We can conditionally render elements with Svelte's template via {#if} and optionally {:else}.

To render everything in a list, we have {#each}.

Remember to always close a block with {/if} or {/each}!

(Should've used <ol> in the example, but I wanted to show how index- access works.)

10 - Elegant Async/Await

It's super easy to do asynchronous stuff like API requests with Svelte.

We can simply {#await} a Promise to resolve, displaying a "loading" placeholder before the result is ready.

Note that we await the Promise in the template section, so no await keyword in <script>.

BONUS - Animated Transitions

Svelte comes with neat animated transitions built-in. Try giving your components a transition:fly property! There're also other types like fade, slide, etc. You can also use in: out: to separately define intro/outros.

Attached to the transition prop are the params.

👆 That's All, Folks!

That's it - everything you need to get started with Svelte! 😁

We covered a lot in this crash course, from the most fundamental concepts to topics that might even be considered intermediate or advanced in other frameworks (eg. API requests and animated transitions).

Now it's your turn to play with Svelte and build something cool. The Svelte REPL is a great place to start!

Have fun! 🥳

(Thread crash course format inspired by @chrisachard 😁 Check out his excellent React/Redux, Git crash courses!)

PS

Because Svelte is so expressive, I joked the other day that Svelte devs count "characters of code", instead of "lines of code"...

True that! Here are a few tweet-sized Svelte applets Tomasz Łakomy (@tlakomy) and I (@hexrcs) have been playing with -

// Detect dark theme var iframe = document.getElementById('tweet-1180150776624291846-241'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1180150776624291846&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1183106114273107969-405'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1183106114273107969&theme=dark" }

So, what's the most complex Svelte app that we can fit in a tweet? 😁

Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage: xiaoru.li

DEV Community: The Method Coder

🔥 Debugging Frontend Apps inside VS Code!

💪 React + MobX Crash Course (in 5 pics!)

1 - MobX Concepts

2 - Decorator and observable

3. Action and Computed

4. Reactions

5. Using MobX with React

Summary

Credits

🔥 GraphQL Crash Course (in 10 pics!)

1 - How GraphQL works

2 - A GraphQL Query Exchange

3 - The GraphQL Schema

4 - Argument

5 - Alias

6 - Fragment

7 - Variable

8 - Interface

9 - Mutation Operation

10 - Subscription Operation

BONUS

Online Playgrounds

Additional Resources

⏰ Svelte Crash Course (in 10 pics!)

Huge Update: Video Version Now Available!

1 - How Svelte works

2 - UI Is a Component Tree

3 - The Anatomy of a Svelte Component

4 - The Svelte Template

5 - Setting "Props"

6 - Updating Component States

7 - $: Reactive Statements

8 - Reactive State "Store"

9 - Conditional Rendering And Lists

10 - Elegant Async/Await

BONUS - Animated Transitions

👆 That's All, Folks!

PS

7 - `$:` Reactive Statements