Topic: Flutter Is About To Win Over the Web authors: this article translated from Lew C: betterprogramming. Pub/Flutter – Is -…

Today’s websites, including the one you’re using right now, are written using HTML, JavaScript, and CSS. Obviously, think about it when you read this. If I told you to create a website without using any of these three techniques, you might run into some problems.

However, we have had many players in this field throughout our history. We have Flash, Silverlight, all the competing technologies trying to cut into the browser market share in order to get developers to use other technologies to create websites. But none of them have really taken off yet. So, dear reader, how can I find you and tell you that there might be competition in this field? Especially after years of hard work, there are still no other players in the field?

Well, let’s take a moment to appreciate what these past attempts have in common, which is:

1. They need a browser plug-in to run. They typically require a platform-specific browser plug-in to run on the target platform. Silverlight is a good example – at the time, people using Linux couldn’t watch Netflix because the site relied on Silverlight (not for Linux). Of course, there are open source alternatives, but there is no first party.

2. They introduced security holes. Flash is notorious for this (more than 1,000 bugs are known). The browser will have to load the plug-in to display the content, and at this point, the browser’s security protections won’t matter because the plug-in has full access to the host.

3. Performance is not as good as pure HTML. In terms of whether it is faster to load plug-ins and display text, it is always much faster to load with raw HTML and CSS than to try to load plug-ins to display content.

4. HTML5 comes along and CSS is improved. Suddenly, it’s not impossible to create beautiful, engaging experiences. Better yet, browsers that hate standards, use weird browsers, or use specific vendors are not killed by using CSS equivalents (such as Internet Explorer).

All of this makes it easy to choose native HTML to create new Web applications. After all, if the technology used to create the Web experience has been deprecated and stops receiving security fixes, you have no choice but to rewrite the program from scratch in a new supported language. But how did we get here in the first place? How did HTML become such a pillar of today’s booming Internet?

Dawn of a new era

On August 6, 1991, the network began to spread to the world. And then eventually we had the so-called dot-com bubble. Consider that the web became available for public use only in 1991, nine years before the dotcom bubble burst with a staggering $1.7 trillion in losses. That means the dotcom bubble cost about 15% of U.S. GDP that year.

We’re in that part of history, because the web is becoming more common, and the way we write websites is becoming more standardized. Over time, we came up with html4-like standards that we could use, and those standards ensured that the HTML you wrote in your own world would work with most, if not all, HTML parsers. Cascading Style Sheets (CSS) also arrived in 1996, the year before JavaScript. Can you imagine seeing or using a website without JavaScript or CSS? It will not be a pleasant experience, to be sure.

But, throughout history, certain things have stayed the same on the Web. To be fair, it has to do a lot of things: You never want to rework the HTML standard without a very good reason, so the extensive work of changing the way the web works in future releases may never happen. . That gave us the web we have today. What does that include?

file

When the Internet first appeared, people didn’t use passwords the way they do today. Some of you may remember using terminals that act as thin clients, giving you physical connections from large machines to other terminals. All people have is an “app” (if you can call it that) with a few lines of text on the screen. People are used to processing things as documents, like pieces of paper in their hands that they can peruse. There is no doubt that the documents that generate HTML are the foundation of HTML pages. If you’ve ever worked with JavaScript, you’re familiar with the document.getelementById () functionality. All you do on a web page is generate pages and convert them into documents.

Traditionally, most web pages are too tall to fit in a viewport. Therefore, the user will have to use a swipe on the page or scroll with the mouse. I can’t think of a site I use today that fits perfectly into a user’s viewport (certainly not in this way), so developers will always make sure that some part of the page is above or below where the user is currently viewing it on their page.

However, you still want some parts of the page to be in a certain place or aligned in a certain way. To control the layout of elements, you start using positions in your CSS. A ton of CSS attributes (520 to be exact), and as the name implies, these styles are layered on top of their child elements. When you try to make certain parts of a document appear a certain way, it can get pretty confusing. If you use an existing style framework (such as Angular Material), it will also become very fashionable when you start overwriting the built-in CSS to get the look you want. CSS is yours to use! Override, but once you start doing that, the fight is largely lost. If you’re reading this book and thinking to yourself, “What is that? This guy sounds like he’s hopeless at CSS, “That’s okay, I’m not going to fight you on that. However, CSS can get very complicated when your designers are looking for a certain look and feel.

Learning a language

To create a simple website, you need to use three different languages, which are purely specific to the site itself. That’s HTML, JavaScript and CSS. Your site must look good, and you can’t do that if you don’t know how to write JavaScript or CSS efficiently.

If you actually want your site to do anything, you can use a framework like Angular or React. When you start importing packages through NPM, the size of your application starts to grow, so you’ll also use bundles (such as Webpack) that bundle all packages together and shrink them appropriately. Webpack is a topic in its own right (and a big one), but it’s a topic worth considering and does form an important part of building Web applications.

Bundling and transhipment

Once you have the site and the package, you need to bundle the client with a binder and make sure it works in its browser. Depending on what browser they are using, you also need to “populate” certain features so that users’ browsers can actually use your site. If you’re using a language like TypeScript, webpack also converts to JavaScript. There’s nothing inherently bad about it, but it’s very complex and has a lot of moving parts. If your website crashes, do you mess up the code, or compress it, or do Webpack not include the code correctly, or do you have a translation problem? These complex problems can make it difficult to debug or trace the source of a program problem.

How does Flutter work?

If you’ve heard of Flutter, you’ve probably heard of it in the context of mobile APP development. So how exactly does it apply to websites? Well, for a normal HTML page, you can treat that page as a document. But in Flutter, the “page” (or the content with which the user interacts) is actually drawn onto the HTML canvas. Flutter actually controls every pixel drawn to the screen and does not use HTML, JavaScript, or CSS to define its appearance or logic. (The native Dart code is technically Dart 2JS converted to JavaScript, but does not actually write any business logic in JavaScript.)

You may have noticed two shocking things about this sentence. First of all, there is no HTML. Second, we draw everything onto the canvas. I see – it sounds strange, at least when drawn directly to the canvas, it doesn’t work very well. But let’s take it a step further.

Draw on canvas instead of document

The first is that we’re not writing web pages in HTML, and we’re not writing things in documents. At first glance, this is utter nonsense. But what exactly are you doing when you develop a web page using HTML? Well, as we discussed earlier in this article, the document you created is too big for the viewport of the user’s device, and scroll. When the document height of what you are reading on this page is greater than the height of the viewport, you need to scroll the article.

When you think about it, is it not designing the user interface and expecting content to be too big in the vertical direction and the user has to scroll through it? What if you want the user to scroll left to right instead of top to bottom? It’s not particularly easy to express on a regular web page.

In Flutter, it is as easy to scroll a particular piece of content horizontally instead of vertically as to wrap a widget in a SingleChildScrollView. You can also easily specify the orientation of the scroll bar itself, whether it scrolls vertically or horizontally.

Because Flutter is based on the concept of placing pages in a single widget rather than drawing documents on the screen, developers have complete control over how they want to lay out their applications.

Stick to one language

As mentioned above, creating a great website means you have to know HTML, JavaScript, and CSS. This also means that your knowledge doesn’t transfer between these languages; for example, you can’t reuse any JavaScript knowledge in HTML. HTML is purely a markup language, CSS is purely a style syntax, and JavaScript is purely a programming language. None of these options include anything like type checking, so CSS can be the whole thing, failing silently when a user tries to use a web page.

Flutter uses Dart as its language, and all the application look and feel and business logic are written in it. Dart has static type checking and empty security is coming online, so every line of code in the app is a complete security type, whether it is used to visually describe the application, display its style, or control the business logic of the application.

Lay out your app easily

Broadly speaking, the data we display with our website is another resource: whether the source is a database, an API, or something else, we want to display the data eventually. Imagine that we have an array of objects returned from an API, and you’re displaying them using a framework like Angular. Normally, you would load those objects into the support component and then iterate over them with *ngFor. You might append it to div. Out of the box, however, it looks normal for an unstyled DIV. You might want the items in this list to appear in columns or rows, so you’ll have to use some CSS or Flexbox to do that.

Instead, in Flutter, you can use aColumn or aRow to layout child elements that accept a set of object properties. Most of the time, when considering, you might want to have arrays of objects in a row (side by side) or in columns (side by side). Because of this, you can get the visual layout you need faster before continuing to style the various items in the list. In my experience, this can speed up the scaffolding and prototyping of a site without compromising the final result.

Controls each pixel in the viewport

Because Flutter renders every pixel onto the screen, designers and developers have complete control over how they want to look in their applications. Rendering every pixel on the screen sounds like a huge performance penalty, but don’t get me wrong, it’s certainly not as fast as rendering raw HTML today, but things like GPU-accelerated canvas improve the performance area in this case. Traditionally, designing a web page in HTML meant you had to consider the different browsers you were using. However, in the case of Flutters, because your Text has laid out the widget with a certain font, the display will look the same no matter where it is displayed, because Flutter can control the appearance of a particular widget per pixel.

Bye, Webpack!

Because Flutter uses Dart, when the Flutter program is compiled for its target platform, it also converts all dependent packages (also written in Dart) to JavaScript. Dart is a safe-type language that does not support reflection. The effect, therefore, is to give the compiler a better idea of what the program calls and what it does not. This will better shake the program and minimize it. Building a Flutter application on the Web doesn’t use Webpack because it doesn’t need Webpack, which is (in my opinion anyway) a very strong case for Flutter itself. Webpack yes; This is high quality software. But this is a complex tool already in a complex scheme.

But we haven’t given up there

There’s more to the web than sleek web pages, beautiful animations and beautiful experiences. We really need more than that. We need server-side rendering (SSR) so that our web pages can be crawled by search engines to perform any type of search engine optimization (SEO). Currently, Flutter websites can only be parsed by people, not by search engines, so this will have a huge impact on the way people search and find information on the site. (The problem has been discussed and there seems to be no future solution).

Drawing everything onto the canvas also has its performance implications, but these are not as bad as you might think. I made a test app that made heavy use of visuals and ran at close to 60fps on a MacBook. Even if you drag the drawing onto the screen, it still works and gradually increases the blur of the following images. I am by no means an expert on Dart, so there is no doubt that this process can be further optimized.

Therefore, Flutter needs to improve in several key areas before it can be considered mainstream Web development. But consider this: Flutter has only really been around for the last two years, and it already has an incredible set of features and features.

If you could create a high-performance Web site and use a single language to design, style, and write business logic for Web applications, what would it be? What if WebPack becomes redundant for your development pipeline? And what if you could get server-side rendering in time and all the SEO advantages you have today in traditional HTML-based websites?

If you have all these things, Flutter may win the network.

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign.