Is Flutter about to Win Over the Web?

hey guys so is flutter about to win over the web as you guys know i been an advocate of flutter since its inception i looked at it i said this looks like a cool technology something to keep an eye on not necessarily run out and learn absolutely but it looked pretty good it's been a year or two i guess since it came out and uh yeah so let's take a look at this article flutter is about to win over the webs so this was written in february the cross-platform framework offers the most compelling web development experience websites today including the one you're using right now are written in html javascript and css you probably read that and think to yourself well yeah that pat is patently that's patently obvious there we go if i told you to create a website without using any of these technologies you would probably have some questions and yet throughout the course of history we've had many players in this space we've had flash silverlight which is basically microsoft's version of flash all completing all competing technologies that have attempted to shave off a slice of the browser market to let the developer use different technology to create a website but none of them have really taken off well hold on let me just go back to large stuff here well flash took off flash was pretty bloody big it was huge it was you know didn't replace websites but let me tell you there were a lot of websites that made heavy heavy use of flash so i don't know about that comment there but let's get back into it so how is it possible that i might that i am coming to you dear reader and telling you that there could yet again be a competitor in this space especially after literally none of the other players in this space have gone anywhere despite years of efforts well as i said flash went pretty far but it never replaced the stuff well let's take a minute to appreciate the things that these past attempts have in common namely they needed a browser plugin to run they normally need a platform-specific browser plug-in to run on a targeted platform silverlight is a good example of this sourceflash at the time people who use linux couldn't watch netflix as a site dependent on silverlight which wasn't available for linux sure there were open source alternatives but nothing for his party uh they introduced security vulnerabilities flash was notorious for this over a thousand known vulnerabilities i know flash's vulnerabilities got one of my website's killer sites repetitively hacked in the past unfortunately thank god flash is dead the browser could have to load the plugin display the content and at that point none of the security safeguards in the browser matter as the plug-in had complete access to the host computer yeah so these plugins are basically just separate pieces of software but literally plugged into web browsers anyhow uh the performance was not as good as pure html this is true won't get into that html5 came and css improved suddenly creating beautiful involving experience wasn't impossible with the web better still browsers had that hated excuse me standards used where used weird hacks or vendor specific implementations instead of their css equivalents like internet explorer were killed off okay so what happened i'll give you a little background on this so just case your young nerdlings in around early 2000s nursing there was this movement called the web standards movement and the web standards movement was a big push to force browser manufacturers to adhere to the official specification before i go on you know if you've been following this channel but i've been talking about more and more about health and nutrition and getting in shape and how important that is and as such i've been working with my buddy here you can see him pre and post on a program specifically designed for developers so this is for people who may not have time to go to the gym and the fact of the matter is most people in the whole diet nutrition and exercise world any personal trainer will tell you that weight loss is much more about controlling what you consume how you consume your food and much less about exercise so this program is actually a personal one-on-one coaching program it doesn't require you to do hardly any exercise and you're going to learn about how your body processes food so if you're familiar with keto fasting good habits superfoods etc this is what this program is all about invite you to take a look go to the body developer.com you can sign up free consultation one week trial you're under no obligation if it's not for you no worries but i think a lot of people will find use with this we've have been demoing people for a little while now and people have gotten really good results people losing 10 and 15 pounds or more within the first couple weeks of coaching with oren here so take a look at the bodydeveloper.com if you want to get in shape we're sitting all day as developers not good for your health and the most important thing you can do is learn to control your consumption and the type of food and to have good habits and the support system to help you follow through this is a five week program it's very cool i've developed this with him and working with several people and it works really well so yes the web standards movement was the push by basically a bunch of grassroots activists to push the browser manufacturers to follow the official specification because back in those days when we're building websites we had to build one for ieff version for ie and then we had to figure out how to make the code work in other browsers it was a big mess going back to the 90s a big part of this was because the browsers everybody was trying to take market share and the thinking at the time by the browser manufacturers namely netscape microsoft um which is mozilla uh well not microsoft excuse me netscape became mozilla firefox and then by microsoft with ie ie was once the most dominant the thinking at that time was that we will dominate the web by having a browser that does things better has better tricks the problem is if ie implemented a particular feature set or a way that they would handle set tags or indeed their own set of tags the other browser didn't necessarily do that so there's been a conflict and it got even more insidious than that whereas the one browser would implement you know its default behavior slightly different from another browser in terms of way things are positioned on the page as an example so it's just a plain nightmare so the web standards movements back in those days they were pushing hard it was an advocate group and then they were coming up with all these hacks and ways of basically being able to write css code to structure your websites and still have them work across different browsers anyway that's all gone now fantastic everything's good one thing he hasn't pointed out in this article so far anyway one of the main reasons flash got killed well html5 kmc ss3 came very powerful but also because of steve jobs steve jobs and he admitted this in his book he didn't he was he had a personal gripe against adobe because adobe didn't help out apple when steve jobs first came back to apple so he wanted to kill flash adobe owned flash so he said that's it app flash not running on any ios device uh steve jobs said he said it's because it was slow and it was buggy you know security problem this is all true but the main reason according to i think it was in the book that was published after steve jobs died was he wanted to get back at adobe if i recall anyway steve jobs had a huge huge hand in killing off flash which was the the last alternative to browser-based um fancy app development if you will and then hdl html5 roles partly because of jobs i would say and there you go bob's your uncle then everybody the whole thinking changed they realized the browser manufacturers ie explorer internet excuse me microsoft and chrome roles and they embraced the standards whoever would um whoever would uh adapt adapt adopt the standards would do better in the marketplace so it wasn't just a change of thinking in the marketplace anyway let me go back to this article sorry all these things made the choice to create a new web a web app in native html easy html5 after all it's a technology that you use to create a web experience got deprecated and stopped receiving security fix then there was no option but to rewrite your app from scratch in a new supported language but how did we get here in the first place how did html become such a main stay in today's thriving internet i think i told you that on the 6th of august 1991 the when the web went live to the world then eventually we had the so-called.com bubble come and go i was there during those days but he's consider for a moment that the web only came into existence into the public use in 91 and then nine years later the dot com above the dot com bubble burst costing an astonishing 1.7 trillion that means that the that the dot-com bubble cost about as much as 15 of the united states gdp that year okay uh where in that part of history we excuse me we're in that part of history because that's about the time when the web was starting to become more and more formal the way we were writing websites was becoming more standardized over time we gained standards like html4 that we could use and these standards ensured that html you write in your part of the world will work for most if not all html interpreters cascading style sheets css also entered into circulation in 96 and the year before that javascript also entered the scene can you imagine seeing or using a website with no javascript or css it would not be enjoyable experience that's for sure all right let me script ahead here okay um when the web first came into existence people were not using apps as they are today some of you remember using terminals that acted as thin clients giving you a physical connection to the mainframe on the other end of physical connection okay well let me just scroll fast this it comes as no surprise then that the basis of html pages is to produce html document if you ever used any i've never read i i'm reading this for the first time with you guys by the way uh it it comes to no surprise that when that the basis of html pages to produce an h modality if you ever used any javascript you will be familiar with functions like document.getelementbyid this is basically javascript code allows you to grab a hold of tags in your web page an element is a nurse fancy word for tag anyway html tag everything you do on a web page is to produce and then transform a document now traditionally most web pages are too high to fit in one viewport so the user would have to swipe through the pages with a finger or scroll with the mouse i can think of a website that i use today that fits nearly neatly into the viewer's user's viewport that's the screen the viewport is the screen that you see uh so the developer would always be guaranteed there would be some part of the page would either be above or below where the user is currently looking in the page okay let's see where this guy's going here but still you would be want certain parts of your web page to stay in a certain position or line a certain way you start using things like position in css to control where your air elements or elements are laid out there's a ton of css properties 520 to be exact as the name would apply these styles cascade into your child elements okay blah blah blah blah blah blah if you're using an existing framework angular material then it also gets pretty zesty okay so he's going on about basics yeah so yeah use css and there are css frameworks which are just bunches of code neatly packaged up that you can use to speed up the process the most popular by far is bootstrap for css learning the language in order to create a simple website you need to be you need to be across three separate languages you need to be across three separate languages all right and that's purely a website so that's html css and javascript your website has looking your website has to look and feel great it can't do that if you don't know how to write performant javascript if or if your css styling is bad no a website can look very good without javascript by the way you can just do it html css if you actually want your website to do anything then you might use a framework like angular or react or view if you use another one as you start to bring a package as you start to bring in packages via npn the size of your apps will start to grow okay npm is um node package manager it goes way beyond web design that's if you get into web apps that's using node and javascript so okay let's go on once you have your website and you have your package you need to use a bundler to bundle up your client app to make sure that it works in their browser depending on the what browser they're using you also need to shim in certain features so the users can actually use your website a shim is a is is kind of like a hacking way where um you add some extra again i'm not going to get into details you're basically adding some extra elements or little libraries you can provide that will basically account for any browsers are not not able to support some of the code that you're writing support means it doesn't read or process the code that you're writing properly that's becoming much less of an issue these days if it's much of an issue at all depending on who your target audience is anyway if your language if you're using language like typescript webpack also transpiles from this language into javascript nothing about this is inherently bad but it is very complex and has a lot of moving parts you'd guess that by reading this article if your website breaks did you mess up the code did the magnificat did the minification break it i wouldn't do minifirefications if i unless it really had to did a webpack or did webpack not include it properly or did the transpos transpilation process introduce a problem these complicated pipelines can introduce difficulties in debugging or finding the root cause and the issue of your app oh boy that's a big introduction how we doing here how is flutter any better if you heard a flutter you've likely heard of it in the context of phone app development so how on earth does this apply to websites well with a normal html page you deal with the page as a document and flutter though the page or what the user interacts with is actually drawn to an html canvas flutter actually controls every pixel that is drawn to the screen and does doesn't use html javascript css to define any of its look or logic technically speaking native dark code is transpiled into javascript through dart.js js but no business logic is actually written in javascript um this is a very high level article guys so if you're totally new to development web development there's some things you're probably not getting here dart is a programming language and you write your dart code and then it gets processed and it trans transformed into javascript so because drive will not run in a web browser you've likely picked up two alarming things that since it's first no html second we're drawing everything on canvas i get it it sounds weird and in the case of drawing to the canvas directly not very performed let's dig in a little bit more canvas is something introduced in html5 allows you to literally drop pixels to the screen you can do this with um a javascript of course uh drawing it to canvas instead of the of the document are we doing for space here what's going on here okay we're almost done i'm starting to get bored guys in the first point we're not using html to write our web pages nor are we writing things to a document at first blush this is complete heresy but what exactly are we doing are you doing when you develop a web page in html well as we cover earlier in the article you are make you make a document that's too big for the viewport of the user's device and then they scroll what you're reading right now on this very page the document height is greater than that of the viewport and you're scrolling through the content you know because he never gets to the point this guy i'm just kidding i'm just kidding when you think about it isn't this kind of weird way to design a user interface to expect that the content be will be too big vertically and that the user will have to scroll through it what if you want the user to scroll left or right or instead of top to bottom well that's this bad usability you don't ever want people to scroll rest or right they've done tests over and over and over again left to right navigation two thumbs down don't do it it is not particularly easy expressed on a normal web page you can do it in flutter at one point left to right navigation was experimented with like scrolling left and right rather and flutter if you want to make a particular bit of context horizontal scroble instead of vertical scroll that's easy as wrapping the widgets in the single child scroll view all right you can also specify directional scroll easily whether you're scroll vertical or horizontal okay because flutter is based on the concept of laying out your page in individual widgets not drawing a document to the screen developers are afforded more control over exactly how they want to lay out their applications that's good that's good sticking to one language as previous as previously mentioned creating a website means that you have to know html css and javascript it also means that your knowledge doesn't transfer between these languages you can't reuse any of your javascript knowledge in html for instance i'm not even to get into that html is purely your markup language css is purely your styling language so syntax javascript is purely your programming language none of these options include things like type checking so your css can't can be complete bunk and will just fail certainly when the user tries to use your page okay this is uh anyway you test you know flutter uses dart as its language and all of the application look and feel and business logic dart comes from static type checking and no safety is landing soon so every line of code in your app whether it be used to describe your app visually give your app style or control the business logic react is fully type safe easy to layout your app broadly speaking if you use websites to display data from another source whether a source is a database an apr or something else we wind up with that of it we would like to display imagine that we have an array of objects returned from our api and you're using something like angular to display them typically you would load these objects in into the backing component and then then use star and g4 to iterate through them you'd likely attach that to a div out of the box though for an unstyled div a div tag it would look pretty plain you probably want these items in the list appear in a column or row so you'd have that you'd have to involve some css or flexbox on making this happen conversely with letter you lay out your child to your children by using column or row and has that has a child property has a children property rather that accepts array objects then when you think about most of the time you probably want to your arrays of objects in a row side-by-side okay so it's basically okay a controller every pixel viewport goodbye webpack because flutter uses dart when flutter app is compiled for its target platform it transpiles all the dependent packages also written in dart to javascript as well dart is type safe language that doesn't support reflection this leads to better shaking tree shaking and minification of your app building your flare app for the web doesn't use webpack because it does need it which is pretty strong case for flutter in my in itself in my mind there's nothing wrong with webpack it's a high quality piece of software but it's complicated to an already complicated pipeline so we're not quite there yet uh hold on let's grow because i'm quite there drying everything to the canvas also also has performance implications but these aren't as bad as you think i made a test app that makes heavy use of visual effects it runs nearly 60 frames per second on my macbook even when dragged even when you drag the sheet over the screen still performs okay progressively increasing the blurry image behind i'm not an expert in dart by any means so no doubt this process could be optimized further so there are a couple of key areas that flutter needs to improve on before people will consider it for mainstream web development but i think for remote but think for a moment flutter only really came out in the last two years and the performance and feature set that it already has is nothing short of incredible what could it be then what could it be then if we could make a website that was performant and you could use one language to design style and write the business logic for your web app if we're back if webpack became superfluous to your development pipeline and if you could have server side rendering and all the seo goodness that you have today in traditional html-based website if you had all that then flutter could win the web all right so there's that article yeah you know he's he's he's got his uh his angle there um what's my comment on that um html5 css3 and javascript will not be replaced entirely by flutter i think flutter or any flutter-like technology will be a supportive technology for the foreseeable future and i like flutter it's got a nice logo it's got a good name i'm joking well it does have a nice logo but it's a good technology but it's not it's not a panacea it's it's not going to replace html and he's creating a few straw men here meaning he's creating scenarios that making making it seem that html css and javascript are oh so difficult it's not really want you to get your head wrapped around it uh that to say i think flood is a good tech so something worth looking into so there you go all right if you're interested in learning more from me i have a pro developer mentoring program you can find it at studioweb.com mentoring links below and it's my most advanced program it has everything that i teach it's lifetime access you can pay monthly depending on the level or you can pay one shot i get a discount it's kind of like my virtual boot camp and we have bi-weekly zoom meetings access to all my course content access to my certifications access to private content that only the mentors get involved with this is about a year old this program and i've limited talking about it because i always want to be sure that i can handle the group because there's an option you can get direct consultations with me so people really love it the people really love the program and people are getting jobs and landing gigs and so forth so if you like that mentoring environment check out again studioweb.com rendering check that out and you'll find out all about the program you can decide if you want to get involved if you have any questions feel free to contact me directly and stephan at studio web and i'll be happy to answer any questions you may have but we cover everything we cover code training and we have the sport community we have communication psychology training private consultation with me we must make it flexible so you're not set to any particular schedule as i teach whether it takes you a month to learn javascript for two months doesn't matter you work at your pace everybody's got different schedules different aptitudes so this mentoring program is really represents modern educational practices all right thanks for watching the video bye

Channel: Stefan Mischook

Views: 27,557

Rating: 4.0694089 out of 5

Keywords: developervlogs, developermentoring

Id: H11oP62QmAk

Length: 25min 43sec (1543 seconds)

Published: Thu Mar 11 2021