Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Search - "progressive web app"
-
Somebody asked on how to get started on Full Stack web application development.
This is how I got started.
Client side Web Application Development:
---------------------------------------------------------------
• Start with basic HTML, CSS and JS, JSON. For quick learning, see W3Schools for these topic or YouTube it.
• Get a local web server. "200 OK!" webserver chrome extension is a good start. (https://chrome.google.com/webstore/...)
• Learn Chrome Dev Tools to debug the pages. YouTube it.
• Get a good IDE. I am very happy with VSCode. You can use it for very serious WebApps.
• Start learning JavaScript language in depth, but just related to Web Browser related topic or you would get sucked in server side too early.
• Install node.js. Learn NPM package manager. Learn basic node commands.
• Learn complexity of JS file referencing, JS modules in browser. Just learn, don't use it yet, to understand the benefits of code bundlers.
• Learn Webpack code bundler.
• Learn how to make you simple site much faster and using in Mobile using "Progressive Web Apps".
• Now learn to make modular UIs. I love React. Focus on getting the UI code modulear. Create Single Page sites. (You are not there yet to create a Web App) “Create-React-App” started kit is a good starting point.
• Learn to create multi-page site using React-router.
• Learn application state management using Redux.
• Learn to create application decision engine using Redux-Saga.
Practice and master each stage.
Along above, learn git / GitHub (to learn from others code), find good web resources like Medium / Smashing magazine, good YouTube channels etc. I subscribed to some popular Udemy courses too.
Server side Web development:
------------------------------------------
:) First learn client side Web Application development. Server side learning is another story.3 -
Static HTML pages are better than "web apps".
Static HTML pages are more lightweight and destroy "web apps" in performance, and also have superior compatibility. I see pretty much no benefit in a "web app" over a static HTML page. "Web apps" appear like an overhyped trend that is empty inside.
During my web browsing experience, static HTML pages have consistently loaded faster and more reliably, since the browser is immediately served with content useful for consumption, whereas on JavaScript-based web "apps", the useful content comes in **last**, after the browser has worked its way through a pile of script.
For example, an average-sized Wikipedia article (30 KB wikitext) appears on screen in roughly two seconds, since MediaWiki uses static HTML. Everipedia, in comparison, is a ReactJS app. Guess how long that one needs. Upwards of three times as long!
Making a page JavaScript-based also makes it fragile. If an exception occurs in the JavaScript, the user might end up with a blank page or an endless splash screen, whereas static HTML-based pages still show useful content.
The legacy (2014-2020) HTML-based Twitter.com loaded a user profile in under four seconds. The new react-based web app not only takes twice as long, but sometimes fails to load at all, showing the error "Oops something went wrong! But don't fret – it's not your fault." to be displayed. This could not happen on a static HTML page.
The new JavaScript-based "polymer" YouTube front end that is default since August 2017 also loads slower. While the earlier HTML-based one was already playing the video, the new one has just reached its oh-so-fancy skeleton screen.
It would once have been unthinkable to have a website that does not work at all without JavaScript, but now, pretty much all popular social media sites are JavaScript-dependent. The last time one could view Twitter without JavaScript and tweet from devices with non-sophisticated browsers like Nintendo 3DS was December 2020, when they got rid of the lightweight "M2" mobile website.
Sometimes, web developers break a site in older browser versions by using a JavaScript feature that they do not support, or using a dependency (like Plyr.js) that breaks the site. Static HTML is immune against this failure.
Static HTML pages also let users maximize speed and battery life by deactivating JavaScript. This obviously will disable more sophisticated site features, but the core part, the text, is ready for consumption.
Not to mention, single-page sites and fancy animations can be implemented with JavaScript on top of static HTML, as GitHub.com and the 2018 Reddit redesign do, and Twitter's 2014-2020 desktop front end did.
From the beginning, JavaScript was intended as a tool to complement, not to replace HTML and CSS. It appears to me that the sole "benefit" of having a "web app" is that it appears slightly more "modern" and distinguished from classic web sites due to use of splash screens and lack of the browser's loading animation when navigating, while having oh-so-fancy loading animations and skeleton screens inside the website. Sorry, I prefer seeing content quickly over the app-like appearance of fancy loading screens.
Arguably, another supposed benefit of "web apps" is that there is no blank page when navigating between pages, but in pretty much all major browsers of the last five years, the last page observably remains on screen until the next navigated page is rendered sufficiently for viewing. This is also known as "paint holding".
On any site, whenever I am greeted with content, I feel pleased. Whenever I am greeted with a loading animation, splash screen, or skeleton screen, be it ever so fancy (e.g. fading in an out, moving gradient waves), I think "do they really believe they make me like their site more due to their fancy loading screens?! I am not here for the loading screens!".
To make a page dependent on JavaScript and sacrifice lots of performance for a slight visual benefit does not seem worthed it.
Quote:
> "Yeah, but I'm building a webapp, not a website" - I hear this a lot and it isn't an excuse. I challenge you to define the difference between a webapp and a website that isn't just a vague list of best practices that "apps" are for some reason allowed to disregard. Jeremy Keith makes this point brilliantly.
>
> For example, is Wikipedia an app? What about when I edit an article? What about when I search for an article?
>
> Whether you label your web page as a "site", "app", "microsite", whatever, it doesn't make it exempt from accessibility, performance, browser support and so on.
>
> If you need to excuse yourself from progressive enhancement, you need a better excuse.
– Jake Archibald, 20139 -
So the group announced a merge of several systems into my platform. Growing it from 5000 sites to 75000. Lead time of a year, time enough to build it properly, finish the split of the current monolith into microservices, make it fast.
Suddenly, they reduced the time to three months, no explanation given. Solution is to keep the current PHP shit pile, but "scale" it using magic hardware or something. Oh and add 258 features, including things like "intuitive navigation" and "progressive web app" which some junior PM wannabe got off wikipedia or something.
And my boss has bent over to these morons and basically said yes, instead of informing them that this is a fool's errand.
Fuck em. I've said that they're nuts, and if they force the issue, I will resign. And my team probably will too.
But first I will take an inconveniently timed holiday.2 -
Progressive Web Apps(PWA) are freaking awesome !!
Its the future of Apps !!
I fuckin love it how you can just download the app by visiting the website !
Its gonna cut down Development costs alot!
5 years down the line, its gonna be fire🔥7 -
I'm fiddeling around with progressive web apps. I made something and hosted it on a subdomain. Today I made a typo and found my app on an other domain. All my assets and files are copied there. He even uses my SSL certificate.
It's not that spectacular. The app is nothing "revolutionary". It's just the first time it happend to me.
Have you ever found your code on other websites ? How did you react ?7 -
YAAAY,
finished my first small project today!
It was the final project of my semester in coding and because coding isn't the main focus of my studies there's not much expected from us - new Date, sorting a list and using local storage were among the more 'complicated' things we learned...
So most of my mates just develop/design a small portfolio website or something but my team (2 others and me) wanted to do a little more so we built a progressive web app, complete with service worker for offline functionality and so on, that can take pictures using your camera, save them to IndexedDB, display only the images the currently logged in user actually took and much more... and today is the day all bugs (that we found...) are finally ironed out!
Now I know that still is just the very beginning but now I want to learn mooooore!
Am happy, had to rant. :D1 -
Just a quick rant on JavaScript,
So there’s a lot of people hating javascript, and while not a long time ago i was part of them, but I changed my opinion a little.
I think JavaScript is a great way to deal with website programming as it is quick and efficient, but I would not say to program directly on it, use a js-compilable language (CoffeScript, TypeScript, Kotlin(I think), etc.), but then you might say: “Well, no need for js then, compile it in byte code”. That would break the point of how I see web design/dev. The main intent behind webpages is to have an easy and fast way to send code to other computers to render them, that’s why it is interpreted: “Easy to send” and “*All* computers can handle it” with the proper browser. You need to be able to change the way the website is rendered and/or works sometimes, for diverse reasons like copy/pasting data, make it render properly or use plugins/add-ons to change that code to suit your needs.
I think js should be kept as a “readable byte-code”, so that means: {
Keep comments when compiling the js-compilable code,
Add standardized machine-readable comments that will indicate to smart code viewers how to show a particular thing (Like have a higher-end function compiled in js shown as a minimized code with explanations of the function)
Keep it nicely formated and don’t obfuscate (coz that’s annoying)
Etc.
}
So you bypass the quirks and all that pesky js stuff, while keeping it’s good sides.
-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-
Part 2:
Web design for non-web:
Ok so things like node.js, electron, react-native and all that stuff; I won’t say they’re bad but...
Why we have this is because web designers wanted to make desktop apps and were like “Hey! Making web pages is easy! Let’s port it to desktop”, the problem is: Web technologies were made to work on a restricted canvas, aka a browser. It’s good on web for reasons mention earlier and more. But it’s not on desktop! You’re trying to push it outside of those boundaries. It’s difficult to make it break that canvas and go outside, make something that really works! For social media clients and that kind of stuff that you want to make a little more inclusive, yes! it’s a great idea (hello devrantron ;), but not if it’s an exact same copy of the website, just use the website. But for things that are supposed to really make use of YOUR computer; no!
I see those PWA (progressive webapps aka mobile app, but it’s an offline website”), I stand for the same positions, social media and those sort of things: yes, great idea! Games? 🤢.
I have way more to say but I have difficulties to remember them while reading, so feel free to comment your thoughts
Lol, “just a quick rant”1 -
Don't you just love thise dev days that just flay by, looked at the clock now and its just after 5pm,been coding pretty much all day.
Was reading up on progressive Web apps last night and just as a quick test made my own website one, so this morning through I would take the next step.
Few months ago I had made an events list app for android, also just for fun, but I point blank refuse to take it to ios as I see no reason to spend nearly 6 weeks salary on a Mac book because they a bunch of dicks, not to mention the $100 you need to pay each year just for them to annoy you.
Anyway, so after a quick update to my api, no thanks to Gitlab. I put together a fully offline capable pwa in react. So awesome how simply it really was, it's basically done, just needs some polish.6 -
Did any of you made a progressive web app before? If yes; what were your experiences with it? Pro's and cons?4
-
1. Learn Vue.js
2. Learn some backend framework or language like Express.js or ROR
3.Learn Mongo DB
4. Make a progressive web app
5. ???
6.profit? -
Plans for 2019 are to release two products.
1. A text-based strategy game engine that will act as the core of two or more progressive web applications, using Node.js/Express, EJS, and SCSS. It will be proprietary, subscription-based, and playable 24/7 online or offline as a web site or mobile app with nightly/weekly/monthly events and items (think KoL, on steroids, with butter on top.)
I am currently undecided whether to go with MongoDB, MySQL or PostgreSQL, so any feedback - without derailing the other choices, and understanding that it needs to be minimal at first with the ability to expand to millions of users - would be appreciated.
2. I'm sculpting collectors figurines of guinea pigs, molding, casting and then selling a limited set that are hand-painted by me with a certificate of authenticity, as well as marketing blank versions of each with a choice of three colors (including white, and either red or black for eyes - a total of five) for people to either paint by themselves, family members, or friends.
This will also have a website that allows you to choose the breed and colors (changing the picture according to your choices), as well as allowing people to use it as a social media outlet - as if their own guinea pigs had profiles instead of humans. It's also planned to support rescues worldwide and educate folks about properly caring for cavies.4 -
PixelCraft is a pixel Art & Animation Creation Tool Built using HTML5 Canvas.
It is a Progressive Web App (PWA) with offline compatibility.
It is mobile-friendly and is very easy to use.
Would love to hear your feedback.15 -
My team for the uni project is quite big (8 people) and we need to create a progressive web app. The problem is I am the only one who know some JavaScript and I am not even good at it. Does somebody have tips how to learn web dev quickly?4
-
I think I am in love with Progressive Web Apps concept and user experience with mobile operating systems, as it is easy to install (as simple as a shortcut on home screen). Just want to know if there are any downsides of using it? Compared to full app install?
I would love to see some games which can be played offline as PWA6 -
How is a "web app" any better than a "web site"?
All a "web app" does is adding a JavaScript program as a middle-man between the browser and the server.
Where as "web sites" instantly deliver content, "web apps" deliver JavaScript code that then loads the content and puts it on the page.
A "web site" serves the browser useful content on a silver plate (metaphorically speaking), where as "web apps" serve some JavaScript code and the browser has to do the heavy lifting.
It appears that the only benefit of "web apps" is the fancier name. "App" sounds fancy while "site" sounds mundane. But technically, a "web app" is worse than a "web site". It's both slower and vulnerable to scripting errors.
Why would anyone in their right mind choose to create a web "app" over a web "site" to load text and a bunch of pictures?
I get it, some things such as posting comments without reloading the page and loading new search results when scrolling down are not possible without JavaScript, but why use JavaScript for everything, even where it wouldn't be necessary?
JavaScript should never be required to show a bunch of boxes containing pictures and some text. JavaScript is intended to enhance web sites, not to load entire websites.
As web developer Jake Archibald said, "[100% of] your users are non-JS while they're downloading your JS" ( https://twitter.com/jaffathecake/... ).
See also: I miss the good times when the web was lightweight. ( https://devrant.com/rants/9987051/... )
"App" is not an excuse: https://jakearchibald.com/2013/...
I am sad Archive.org switched to being a web app. But I applaud them for resisting that trend longer than most other large sites.28 -
What do people think of Vue.js over something like Polymer for making Progressive Web Apps?
I've used Polymer a lot (Angular 1 before that) and I'm not a fan of it's data binding. It is using a web standard though, so should have more components available than any library that makes it's own component system (like Vue.js). -
Do you know any good frameworks, preferably with a large community and some popularity, to develop progressive web apps (PWAs) in Python?4
-
How are you all controlling your smart home? Has anyone else experience with self-coded controlling?
I have made very good experiences with ioBroker and a sync to Firestore. I am currently able to controll everything neatly with Google Home and Assistant, log my entire home's state periodically to BigQuery, from where I can analyse everthing later on an controll everything via an Progressive Web App. You can check it out here: https://smart-connect-demo.web.app/5 -
Progressive Web apps :
In chrome you can use <6% of the free memory to store things.
Now imagine this situation :
Let's assume you have x amount of free memory in the system.
For first application : 0.06x
For second app : 0.06(x-0.06x)
And it goes on.
So for the thousandth developer,
It's a total fuckall.
How is this helping developers!