DEV Community: Muhammad Arshad

Python in the Browser

Muhammad Arshad — Fri, 06 May 2022 14:37:55 +0000

All you need to know about PyScript by Anaconda

Anaconda engineer Fabio Pliger and author of pyscript project, unveil the project that enables python programmers to write python scripts that can run in browser.

He says in his latest blog;

One of the main reasons I joined Anaconda seven and a half years ago was the company’s commitment to the data science and Python communities by creating tools that enable people to do more with less.

Today I'm happy to announce a new project that we’ve been working on here at Anaconda and we hope will take another serious step towards making

TL;DR

PyScript is a framework based on pyodide project that is Port of CPython to Web Assembly (WASM)/Emscripten.Which is enables users to build rich Python applications in the browser by combining Python and standard HTML.

PyScript aims to provide users with a first-class programming language that is more expressive, has consistent styling rules, and is easier to learn.

What is Pyodide?

Pyodide allows you to install and run Python packages in your browser using micropip.On PyPi, any pure Python package with a wheel is supported.

Many C-extension packages have also been ported for use with Pyodide.

Many general-purpose Python packages, such as regex, PyYAML, and lxml, are included, as are scientific Python packages such as NumPy, pandas, SciPy, Matplotlib, and scikit-learn.

Core Components

https://www.anaconda.com/blog/pyscript-python-in-the-browser

Python in the browser: Enable drop-in content, external file hosting (made possible by the Pyodide project, thank you!), and application hosting without the reliance on server-side configuration

Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more). Any pure Python package with a wheel available on PyPi is supported.If your package is unavailable you need to open PR to Pyodide project

Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces

Environment management: Allow users to define what packages and files to include for the page code to run

<py-env>                              
- './static/wheels/travertino-0.1.3-py3-none-any.whl' - './static/wheels/toga_core-0.3.0.dev33-py3-none-any.whl' - './static/wheels/toga_web-0.3.0.dev33-py3-none-any.whl' - './static/wheels/freedom-0.0.1-py3-none-any.whl' </py-env>

Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more

Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

PyScript’s goals:

Offer a clean and simple API
Support standard HTML
Extend HTML to read custom components that are opinionated and reliable
Provide a pluggable and extensible components system

Try pyscript

To try PyScript, import the appropriate pyscript files to your html page with:

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

At that point, you can then use PyScript components in your html page. PyScript currently implements the following elements:

: that can be used to define python code that is executable within the web page. The element itself is not rendered to the page and only used to add logic
: creates a REPL component that is rendered to the page as a code editor and allows users to write code that can be executed

Development setup

PyScript does not require any development environment other than a web browser. We recommend using Chrome.

If you’re using VSCode, the Live Server extension can be used to reload the page as you edit the HTML file.

Create your first PyScript

Here’s an example of PyScript saying “Hello, world!”

Using your preferred editor, create a new file called hello.html in the same directory as your PyScript, JavaScript, and CSS files, and open it in your web browser.

In most cases, you can open an HTML file by double-clicking it in your file explorer.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body> 
    <py-script> print('Hello, World!') </py-script>
 </body>
</html>

The use of the tag in the HTML body is notable. This is where your Python code will be written. We’ll go over each of PyScript’s eight tags in the sections below.

First Hand experience

I tried few examples after cloning the repo and discovered that they have a slow load time, which isn’t the fault of this framework because it affects all WASM projects.

I think it best suited for game development in web browser or data visualization/dashboards projects.

PyScript is just getting started, and their goal for it is far bigger than what they’ve displayed right now. While it is still unstable and limited, it does work!

Node.JS 18 Released

Muhammad Arshad — Thu, 21 Apr 2022 18:51:54 +0000

All you need to know about Nodejs 18

A Quick Intro

Node.js is a cross-platform, open-source back-end JavaScript runtime environment that uses the V8 engine to execute JavaScript code outside of a web browser.The basic idea behind Node.js is to employ non-blocking, event-driven I/O to keep data-intensive real-time applications that run across dispersed devices light and efficient.

Node.js v18?

It’s that time of year again, when Node.js 18.0 is released by the Node.js community. The most wonderful news is that in October 2022, this version will be elevated to long-term support (LTS). The codename for the release will be ‘Hydrogen’ once it is promoted to long-term support. Support for Node.js 18 will last until April 2025. Before that, we need the rest of the ecosystem to test it out and provide feedback to the community. This will allow us to address any issues ahead of time and ensure that the release, ecosystem, and customers are all ready when it is released.

Deprecation and Removals

**_“(SEMVER-MAJOR)_**  **_fs_** _: runtime deprecate string coercion in fs.write, fs.writeFileSync (Livia Medeiros) #42607_

**_(SEMVER-MAJOR)_**  **_dns_** _: remove dns.lookup and dnsPromises.lookup options type coercion (Antoine du Hamel) #41431_

**_(SEMVER-MAJOR)_**  **_process_** _: runtime deprecate multipleResolves (Benjamin Gruenbaum) #41896_

**_(SEMVER-MAJOR)_**  **_stream_** _: remove thenable support (Robert Nagy) #40773_

**_(SEMVER-MAJOR)_**  **_tls_** _: move tls.parseCertString to end-of-life (Tobias Nießen) #41479_ “ __Node Document

Okay Now let’s see What’s New?

Experimental Fetch:

The most exciting news is that version 18 will finally provide native fetch functionality in Node.js. For the longest time, Node did not contain support for fetch, which is a highly standard API on the web for conducting HTTP requests or any other type of network request, and Node did not support it by default. If you wanted to make an HTTP request, you had to either use third-party tools or write the request from scratch. The implementation comes from undici and is inspired by node-fetch which was originally based upon undici-fetch. The implementation strives to be as close to spec-compliant as possible, but some aspects would require a browser environment and are thus omitted.

The API will remain experimental until further test coverage is introduced and the contributors have verified that the API implements as much of the requirements as is practicable.

Because JavaScript is utilised in so many areas, this is actually wonderful news for the entire ecosystem.It’s utilised on the web, in Node.js, and in Cloudflare workers, for example.

Cloudflare workers are currently shipping with their own proprietary implementation fetch. You’ll ought to install some few packages until you can use Node.There is a version for the web, so there is a lot of inconsistency along the route. Node is now providing formal support for this. That is, any environment that runs JavaScript on servers is almost certainly running Node. If it isn’t running Deno, it will support fetch by default, and because this is the team, the real team, doing it.

This tweet by Matteo Collina indicates that in Node.js version 18, which is the next version of Node and even numbers are LTS versions as well.

Tweet on Node.js V18

Example:

fetch API

Undici Library in Node.js:

If we look at this issue closely, we can see that Node utilised or primarily ported a library called Undici. What exactly is this library? It’s officially produced by the Node team, however it’s really an HTTP 1.1 full-fledged client written entirely in Node JS.

Experimental test runner:

The node:test module facilitates the creation of JavaScript tests that report results in TAP format. To access it:

import test from ‘node:test’;

This module is only available under the node: scheme. __Node Document

Node.js 18 features a test runner that is still in development.It is not meant to replace full-featured alternatives such as Jest or Mocha, but it does provide a quick and straightforward way to execute a test suite without any additional dependencies.

It provides TAP output, which is extensively used, and makes the output easier to consume.

More information may be found in the community blog post and the Node.js API docs

Example:

community blog post

Note: The test runner module is only available using the node: prefix. The node: prefix denotes the loading of a core module. Omitting the prefix and importing 'test' would attempt to load a userland module. __Node Documents

Platform support:

As with other major releases, this one upgrades the minimum supported levels for systems and tooling needed to create Node.js. Node.js includes pre-built binaries for a variety of platforms. The minimum toolchains for each major release are evaluated and raised if needed.

· Red Hat Enterprise Linux (RHEL) 8 now builds prebuilt binaries for Linux which are compatible with Linux distributions based on glibc 2.28 or later, such as Debian 10, RHEL 8, and Ubuntu 20.04.

· MacOS 10.15 or later is now required for prebuilt binaries.

For AIX the minimum supported architecture has been raised from Power 7 to Power 8.

Due to issues with creating the V8 dependencies in Node.js, prebuilt binaries for 32-bit Windows will not be accessible at first. With a future V8 upgrade, we hope to restore 32-bit Windows binaries for Node.js 18.

According to Node.js BUILDING.md file

Supported platforms is current as of the branch/release to which it belongs

Input

Node.js relies on V8 and libuv. We adopt a subset of their supported platforms.

Strategy

There are three support tiers:

Tier 1 : These platforms represent the majority of Node.js users. The Node.js Build Working Group maintains infrastructure for full test coverage. Test failures on tier 1 platforms will block releases.
Tier 2 : These platforms represent smaller segments of the Node.js user base. The Node.js Build Working Group maintains infrastructure for full test coverage. Test failures on tier 2 platforms will block releases. Infrastructure issues may delay the release of binaries for these platforms.
Experimental : May not compile or test suite may not pass. The core team does not create releases for these platforms. Test failures on experimental platforms do not block releases. Contributions to improve support for these platforms are welcome.

V8 version 10.1

The V8 engine has been updated to version 10.1 as part of Chromium 101. The following new features are added in Node.js 17.9.0 over the previous version:

findLast() & findLastIndex():

With the findLast() and findLastIndex() methods, This use case is easily and ergonomically solved.They perform identically to their find() and findIndex() equivalents, with the exception that they begin their search at the end of the Array or TypedArray.

Example:

Improvements to the Intl.Locale API.
The Intl.supportedValuesOf function.
Improved performance of class fields and private class methods (the initialization of them is now as fast as ordinary property stores).

A big thank you

The Node.js releaser team, which created and supervised the Node.js 18 release, would like to thank everyone who contributes to Node.js releases.The Node.js project has a vast cast of contributors working on it, and each release is the culmination of their efforts.

Wrapping up

All of the new features and updates are detailed in this community post here.Check out the project website to learn more about the Node.js community and how you can help.

What`s new in React v18

Muhammad Arshad — Thu, 07 Apr 2022 17:39:26 +0000

All you have to know about React18

An Introduction to React

Do you work as a web developer?

If you answered yes, you should be aware that React.js is an open-source JavaScript library for creating user interfaces for single-page applications.

REACT V18.0

React v18.0 is a crucial new version of React released on March 8, 2022. It has numerous galvanic features and updates for the React.js development community. The great news is that it doesn’t break your existing code. So, what you learned still applies as well. You still write code the same way as before.

What’s New?

React 18 new features and refinements are possible thanks to the latest opt-in “concurrent rendering” mechanism in React 18 that enables React to create multiple versions of the UI at the same time. Though this change is mostly behind the scenes, it will unlock new possibilities to improve the app performance. — React document

Screenshot from React 18 Keynote slides.

So, let’s talk about React 18 latest features and updates.

Concurrency

The most crucial addition in React 18 is concurrency. I think this is basically true for developers, though the story may be a bit more complicated for library maintainers.

Concurrency is not a feature, per se. It’s a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it’s valuable because of the features that it unlocks. — React document

In other words:

“ The latest concept & set of features (plus APIs) that support with state update categorization urgent state updates can be categorized over minor urgent, long taking obstructing updates ”

Concurrency is all about processing various simultaneous state updates.

React uses a heuristic to decide how “urgent” an update is, and lets you adjust it with a few lines of code so that you can achieve the desired user experience for every interaction.

New APIs

Now, you can enumerate react about state update that has lesser priority by using one of the new APIs introduced with React 18.

useTransition() & StartTransition() Hook

By default, all updates in React are considered urgent. That could create a complication when prompt updates are slowed down by dense updates.

However, starting React 18 and the new concurrency features, you can spot some updates as disreputable and non-urgent — so-called transitions. That’s basically useful with dense UI updates, like filtering bragging lists.

Wrap a state update with startTransition() to let React know that is possibly managed with lower priority.

State Update Batching

Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout , native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically.

Suspense in Data Frameworks

Suspense is not a data fetching library. It’s a mechanism for data fetching libraries to communicate to React that the data a component is reading is not ready yet. React can then wait for it to be ready and update the UI. — React document

What is Suspense?

It is a lower-level engine API that can be used to pause a component’s accomplishment. How is that done? In a nutshell, it all boils down to a component throwing a Promise that is deflected by the engine. It will defer the execution of that component’s tree until the Promise is resolved or rejected.

Suspense component

Lazy loading exclusively means that you implement code splitting to only load code for an irrefutable component when needed. It can help with performance since less code has to be downloaded initially. This is often used in combination with routing. For example, you already used a suspend component to show a fallback component, for example, a loading spinner until the code for the lazily loaded component was downloaded. However, before React 18, you couldn’t use the suspense component if you also used server-side rendering. Now, of course, many apps might not use that, but if you did use it, you would not be able to use the suspense component because it would cause an error. But React 18 enables Suspense for SSR. In addition, Suspense will also be usable for general data fetching (not just code splitting) in the future.

New Client and Server Rendering APIs

In the latest release of React 18, They redesign APIs and expose them for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.

React DOM Client

As they said latest APIs are now exported from react-dom/client:

createRoot is a New method to create a root to render or unmount. And used instead of ReactDOM.render.

hydrateRoot is a new method as well to hydrate a server-rendered application. Which is used instead of ReactDOM.hydrate in conjunction with the new React DOM Server APIs.

Note: New features in React 18 don’t work without it.

createRoot and hydrateRoot both accept a new option called onRecoverableError in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use reportError, or console.error in the older browsers.

React DOM Server

These APIs are now exported from react-dom/server as well as react-dom/client and have full support for streaming Suspense on the server:

renderToPipeableStream is used for streaming in Node environments.

renderToReadableStream is used for modern edge runtime environments, such as Deno and Cloudflare workers.

According to ReactDocs.

The existing renderToString method keeps working but is discouraged.

How to Update?

Updating React 18 indeed is a piece of cake. Or you can say Updating is dreadfully easy and requires almost no work. You don’t need to re-learn React and don’t need to change your entire codebase. Installation instructions are the same.

All you have to do is to run:

To install the latest version of React:

Install/Upgrade using NPM

Install/Upgrade using YARN

After running that there’s one single change you have to make to your code base is that to take benefits of new features which unlocked and added by React 18 you have to go to your root entry file. Typically, index.js.

In index.js file replace the import of React DOM from React DOM

index.js

That’s all no other change is required. As I said before what you learned still applies as well you still write code the same way as you are before.

Is Xamarin really dead?

Muhammad Arshad — Mon, 27 Dec 2021 06:43:12 +0000

MAUI — Multi-Platform App UI rise from ashes of Xamarin

(source ProjectPhoenixRisingAgain)

We must remember the year 2011, the year when Xamarin was firstly introduced to the market. Since then, it has improved a lot. There were many enhancements within the way to its current position. It has helped many companies and developers to create awesome cross-platform applications. But it’s a time to say goodbye to Xamarin and say hello to .NET MAUI.

Let’s give a quick look at Xamarin’s past, present, and future

Microsoft acquired Xamarin in 2016.
Microsoftannounced a new face of cross-platform app development known as .NET MAUI.

What is .NET MAUI?

.NET MAUI (Multi-platform App UI) is a cross-platform framework to develop native mobile and desktop apps using C# and XAML.

Benefits of .NET MAUI.

1- Project Structure: It is based on a single project structure, Instead of Xamarin.Forms that contain separate projects for each targeted platform, .NET MUAI project will only contain a single project that will run on all supported platforms.

2- Design Patterns: There are other benefits of .NET MAUI as it supports multiple design patterns to develop apps. It will support MVVM, MVU, and Blazor development patterns.

3- Performance: A lot of people complain about Xamarin.Forms performance and app startup time, which is going to be addressed in .NET MAUI. It will replace custom renderers with handlers that are designed to be more performant and extensible. MAUI will also continue to benefit from performance improvements made in the dot net platform.

4- MAUI Blazor: Apps written in MAUI blazor can run on desktop, which means web developers can take benefits from UI written in Html/CSS and can also access device capabilities if they are targeting native applications. All the apps written in MAUI blazor can run on Android, iOS, and macOS as well.

These are some of the benefits you can get by developing apps through .NET MAUI. Still, we are getting preview versions of .NET MAUI so we can expect a lot of things to come within the way to get a stable update of MAUI.

Future for Xamarin.

Xamarin will completely be replaced by .NET MAUI. and Microsoft will not support Xamarin after some time because it will be fully incorporated in the .NET ecosystem. MAUI promises to deliver better features than Xamarin so, we should embrace it as a more experienced player in cross-platform development.

Migration.

Besides all the benefits of .NET MAUI, here comes the migration process. As Microsoft shifted towards .NET MAUI then the previous Xamarin projects also need a sift. There are some guidelines given by Microsoft to shift existing Xamarin projects to MAUI. But we should not worry about migration until the stable version of MAUI lands in the market.

You can also see migration steps from this documentation given by Microsoft.

Author

Originally published at https://medium.com on December 27, 2021.

Hot-swapping the Web API for mobile application

Muhammad Arshad — Tue, 21 Dec 2021 08:28:48 +0000

Reverse Proxy ( API Gateway ) to manage Web API versioning.

Hot swapping term drive from hardware component replacement or addition without rebooting the system. When we talk hot-swapping in the Web API context, we can interpret it as no downtime when releasing new features or promoting from beta to public release.

Why is a mobile application is the most suitable candidate?

Mobile Apps are an ideal candidate for hot-swapping web API.

Imagine you have a mobile app with live traffic, and you have a new feature release that needs to make generally available for public testing ( beta ). It will break the current app because API changed or has breaking changes.

This creates a deadlock situation, so we need to release a new API version that will break the current app or if we go with releasing the mobile app that will not work with the old web API.

We have a few possible solutions and work around here to resolve this issue.

Add new fields if possible to handle current and upcoming requirements.
Change URL routing like add v1, v2, v3 or add version in HTTP headers so new mobile app can consume new API on another URL prefixed route.
Add central API in front that will route API on demand by mobile app.
Add reverse-proxy ( API Gateway more princely here )

Let’s validate all four options and select an optimal solution to this problem.

Add new fields if possible to handle current and upcoming requirements. Adding custom fields to prevent breaking changes might be possible in some cases. The solution is to introduce a new field to fulfill the latest requirements. But unfortunately, that does not solve your problem every time but more of this will add an extra burden on API to handle multiple fields that will result in the app no more remaining maintainable, scalable, and sustainable.
API versioning by URL or Headers Another approach is to add API versioning so whenever a new app is released it will increment the API version as well and point the app to use the latest version, the previous version of the app will still work with the previous version. This option is widely adapted by mobile application developers/companies.
Problem solved? Yes, it is solved when you do not promote apps directly from beta to publicly available and change URL when public releasing this means you have to go through again with testing on Apple & Android Stores.
Central API This approach is used when the app adds another Web API to load configuration, users base, and client base implementations by another Web API. Central API is responsible to establish initial communication between the app and the Web API server and performing central operations like authenticating users and loading configurations then it will tell the mobile app which endpoint they need to use for reset of the functionality. This approach is widely used for mobile applications that have multiple clients or multi-tenant nature. This will introduce a single point of failure for every tenant or client when the central API goes down.
Reverse-proxy or API Gateway Add a reverse proxy that will site in front of Web API. That will provide extra perks like load-balancing, protection from attackers (WAF), caching, SSL, and gateway to manage requests. Reverse-proxy retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client, appearing as if they originated from the reverse proxy server it. This approach makes Web API enabled for hot-swapping.

Reverse Proxy Setup

Tada!🎉We have winner here.

[Next Post] I will share story in upcoming week on how we can implement solution based on reverse-proxy to enable hot swapping web API and manage multiple versions.

Stay tune! follow our publication for more interesting stories.