DEV Community: Khauri

Marko: A return to the good ol' days of web development

Khauri — Sat, 14 May 2022 14:57:36 +0000

Let’s get this out of the way first — I understand the fatigue that comes with hearing about the newest framework of the week, but Marko isn’t a new framework. Rather it’s an older, and somewhat lesser known library originally created at eBay that focused on the whole server rendering concept probably long before that was a twinkle in the eyes of some of your current faves. (As a JS dev I'm obligated to say that it's "Blazingly Fast" as well, sorry).

Recently Marko has announced some exciting new changes that can be seen as similar to the shift from React’s class components to hook-based function components. It’s called the Tags api and to me it feels like a nostalgic return to form for web development.

Although this article mainly compares Marko to React, if you’re an average Vue or Svelte enjoyer then you’ll also feel at home with some of these comparisons because Marko:

Enhances HTML with JS instead of enhancing JS with HTML
Has reactive primitives that “just work”
Enjoys all the benefits of being a compiled language

Let’s unpack some of this.

Enhanced HTML vs JSX

Try to think back to when you were first learning web development. If it was anything like my first time then it involved writing some plain old HTML and JS in notepad.exe and watching elements on the page go brrrr. Or maybe you first got a taste for it making themes for your tumblr or myspace blog. Or maybe you were a PHP dev, in which case, my condolences and also are you okay?

And in between jQuery and Angular maybe you found out about React + JSX, which looked like the familiar html syntax, but not quite because there were enough rules and variation that gave it quite the learning curve initially. And although you don’t need to use JSX to use React, let’s face it, if you’re not using JSX you’re going to get bullied. So combine that with learning how hooks work, add in a little redux/mobx, multiply by the amount of bundler and transpilation shenanigans, and then carry the dozen or so css frameworks and...well it really feels like web development took a complicated turn.

Here's where I want to say "enter Marko, stage left", but Marko was already just kinda standing on the stage dressed as a tree.

The first thing to like here is that with Marko any valid HTML is also already valid Marko, so if you already know how to write HTML then you’re more than halfway there. As a smaller benefit, attributes are also all interpreted as JS values so there's no need to suffocate them with curly braces either. This is already a much easier transition for the aspiring web developer than hopping right into JSX.
It's easy to take for granted how natural writing JSX becomes after staring at it for 5+ years, but for beginners the pitfalls in the differences between JSX and HTML are deep and often covered with leaves and branches.

Let’s look at an example of the same basic, non-interactive “Hello, World” in React:

import React from "react";

function HelloWorld() {
  return <div>Hello, World</div>;
}

And also in your standard .marko file.

Playground link

A lot less boilerplate, that’s for sure, but definitely nothing dramatic. Let's dig deeper.

Reactive Primitives vs useState

Let’s modify these examples to have an input field that will update who we’re saying "Hello" to in real time.

In React you’d use the useState hook, which returns the current value along with an updater function as an array that you normally destructure. Then you'd call that updater function with your new value whenever you want to update it. Simple right?

import React, {useState} from "react";

export default function HelloWorld() {
  const [value, setValue] = useState("world");
  return (
    <>
      <p>Hello, {value}</p>
      <input value={value} onInput={(e) => setValue(e.target.value)} />
    </>
  )
}

In Marko, you use the <let> tag, which behaves similarly to the let variable declaration in plain js, and to update it you kinda just…update it?

Playground link

** Please direct all comments about the syntax to the Marko Discord channel.

Because we used the <let> tag here, Marko knows that whenever value is changed then anything that uses it needs to be re-rendered. No proxies, update functions, or reducers required.

Using the bind syntax, this example can be made even more concise.

Playground Link

And all we really did was enhance some plain old html with a few bits of extra syntax and suddenly we have have state in our component. And that's just the tip of the iceberg because you can create your own tags to grab state from anywhere, such as a global store, indexeddb, or localStorage.

Loops without the L

As we know, everyone’s favorite part of React is rendering multiple children in a loop. I think it’s the ugliness and reliance on beginner-unfriendly looking JS that really draws the crowd you know? I mean just look at this beauty?

import React from "react";

function Countries() {
  const countries = ["Sudan", "Chile", "Japan"];
  return (
    <div>
      {countries.map((country) => 
        <p key={country}>{country}</p>)}
    </div>
  )
}

Let’s compare that to Marko though…

Playground Link

I mean, this comparison isn’t too bad right? But let's say I want to make it so that when you click on a country, that country’s color changes to some random color? Well in React, I would probably want to create a new component and manage the state separately:

import React, {useState} from ‘react’;
import getRandomColor from ‘./colors’;

function Country({name}) {
  const [color, setColor] = useState(null);
  return (
    <p style={{color}} onClick={() => setColor(getRandomColor())}>
      {name}
    </p>
  )
}

function Countries() {
  const countries = ["Sudan", "Chile", "Japan"];
  return (
    <div>
      {countries.map((country) => 
        <Country name={country} />)}
    </div>
  )
}

Here's where Marko starts to gain the advantage over Svelte and Vue. In Marko you can create a reactive value at any point in the tree, including inside loops, and it’ll still work just how you’d expect.

Playground Link

I didn’t extract it out to a new component or do anything particularly complicated in order to add a bit of state. This is what Marko calls Fine Grained Reactivity. Of course you can create components in Marko as well, but Marko doesn’t force you to do so at the first sign of slightly complex behavior, or readability issues, or even for technical limitations.

Crying about components

Components are really a developer tool for organizing the developer's mind, and not something that your framework should force upon you when you don't really need it. And yet components in traditional frameworks are themselves seen as entirely stateful or stateless and you have to now learn terms like "Dumb", "Smart", and "Pure" and think hard about how to best optimize the type of component you use for the task at hand. Sometimes you even have to manually memoize entire components to get them to not render multiple times.

Marko's Tags api is a paradigm shift that takes away the burden of having to worry about most of the complexities of the framework itself and most other frameworks frankly seem too far along to copy it. It does so by allowing you to put state not on the component level, but wherever you want or need it to be.

And I know a lot of people will probably see the ability to add state anywhere in your tag as an easy way to write messy code, but I personally see it as a great method of prototyping complex functionality without having to worry about splitting tiny little parts of your project into separate components first. These tiny parts can always be slapped into a new component almost as easily as copy-pasting it into a new file, and at the end of the day whether you use components or inline it all into one big mega component, the html output should look more-or-less the same because the components are "compiled away" into only the truly reactive sections of the page. And you as a developer, in theory, don't have to worry about any of that. And with Marko's built-in server side rendering focus you won't even have to do any special setup to provide an optimized experience to the end-user.

Conclusion

This of course isn’t a full tutorial on Marko or the Tags api and I’ve really only lightly grazed the surface of what’s possible here. There are a few other tags that are comparable to React's hooks such as the <effect> tag for running effects when variables change as well as the <set> and <get> tags for context passing.

The Tags api is still in the development phase and won't be fully released until Marko 6, but my team and I have been using the Tags api preview in production for a few months and have been reaping quite a few benefits already. But the possibilities here are like this pandemic: endless. For example imagine a tumblr/myspace/wordpress like website where writing extensions or widgets is as easy and simple as writing plain html and then "enhancing" it with a bit of functionality. It could get a whole new generation of youth into web development.

Between the Tags api's easy html-like syntax, fine grained reactivity, and built-in SSR, Marko may shape up to be a key player in the framework wars in the near future, so my suggestion? Invest in the stonk.

How To Code On Your Smartphone (With A Terminal)

Khauri — Sun, 03 May 2020 03:25:18 +0000

Overview

In this article I'm going to show you how to use Termux to install nodejs, set up a react app with create-react-app, and edit the files from a separate coding app all from your android smartphone.

This tutorial assumes some very basic knowledge of the command line and unix.

Motivation

A smartphone obviously isn't most people's first choice when it comes to coding, but for a lot of people it's simply their only choice. I wanted to see for myself how difficult it would be to create a full-stack, production ready, version controlled application completely from my Android phone, but after doing a little first page of Google research I learned that most mobile coding apps were lacking most of the features I was used to...namely integration with some kind of terminal. And as we all know, it is every developer's right of passage to struggle with the command line. Fortunately for us, with a little bit of work, we can make everyone's lives slightly harder.

Let's Do It

All we need is a terminal app and a decent code editor app.

The terminal app that I'll be using is Termux. It's free and does not require your phone to be rooted.

For the code editor I will be using the free version of Acode. Feel free to use whatever editor you like as long as it supports FTP (leave your suggestions in the comments). I'm using Acode because it was on the first page of my Google search.

Note: Acode is fully open source which means you can vent any and all frustrations directly at the developer(s) in the form of github issues or show them some support, it's up to you really.

The first thing to do is to open Termux and install nodejs:

pkg install nodejs

Now we need to make a folder to store all of our projects. I'll just do this in my home directory so that it's easy to find later.

cd $HOME
mkdir projects

Now I'll go inside the projects folder and create a react app using create-react-app, almost as if I was doing this on an actual computer.

cd projects
npx create-react-app my-app

This will take a bit of time but ultimately will automatically create a folder named my-app in your projects folder. You can start the development server by changing directory to the my-app folder and then running the start script:

cd my-app
npm start

This should automatically open your browser to localhost:3000 where you'll see the react starter template. Exciting stuff so far, but how about editing stuff?

In order to edit your project files in Acode (or your FTP editor of choice) we will have to serve them over an ftp server. I promise this isn't as hard as it sounds.

But wait, why? Well Android apps, for security reasons, have all of their files isolated from each other, meaning files you create in Acode can't be directly opened with Termux and vice versa...with one exception -- they both have access to a virtual shared storage folder. The bad news is that you cannot create symlinks in this shared folder, which means that most npm install commands will fail if you try them. Trust me, it's a headache.

The good news is that Acode has a feature that allows you to access and modify files from an FTP server and in Termux it's easy to set one up.

First open a new terminal session by swiping from the right and then pressing "new session" at the bottom. Then run this command:

tcpsvd -vE 0.0.0.0 1024 ftpd -w $HOME/projects

******

EDIT

tcpsvd apparently no longer comes pre-installed on Termux so you may get an error when you try this. tcpsvd and many other great tools are available through the busybox binary. You can install busybox and then create a link to specifically the tcpsvd command with the following:

pkg install busybox
ln -s busybox $PREFIX/bin/tcpsvd

******
This opens up a server on port 1024 and serves up everything inside the projects folder. If port 1024 is already in use, feel free to use any other number as long as it's larger than 1024.

Now open Acode and select "FTP" from the three vertical dots menu in the top-right corner, and then "Add FTP Account." For the hostname field put 127.0.0.1 (this is also known as localhost). Now all the way at the bottom edit the port to 1024 (it might sometimes already be filled in as 21).

Fill in any optional fields you want, click OK, and then click the newly created entry to boot 'er up. Now click the hamburger menu to see a folder with all your files. From here you can go into the src folder, edit App.js, click the save button, and then go back to your browser to see the changes applied immediately.

And that's it. Now you can even do things such as experiment with making an express backend, running redis, postgres, and using up all your phone's storage.

And remember to kill your server when you're done developing or you'll likely see high battery usage.