A lack of fundamentals?

A lack of fundamentals?
0
#21

Yeah, there is some truth to that - JS and CSS have picked up some of the slack. I think it’s fair to say that while JQ was indispensable when it first came out, many of it’s features have been adopted or made redundant by advances in JS or CSS.

But libraries are an important part of JS. Again, should I reinvent the wheel and make my own functions that may break if I’ve made a mistake? Or do I use a library that’s been tested and is maintained by a team of guys that could code circles around me and are making sure it is compatible across browsers and are handling any bugs that pop up?

And I haven’t done it yet, but I understand that you can also only load parts of JQ with Webpack - something to look into.

1 Like

#22

This topic was discussed on Hacker News recently - https://news.ycombinator.com/item?id=15573059 (the article being discussed is here: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/). The general consensus seems to be that 100kb of Javascript is not the same as 100kb of images, or even close.

The reality is that lots of the world are still on very slow or unreliable internet connections and you need to provide them with an acceptable experience if you expect them to ever use your site. Rather than time to first paint, Google are concerned about ‘Time to Interactive’ and are promoting a methodology/pattern that they call PRPL (https://developers.google.com/web/fundamentals/performance/prpl-pattern/).

There’s a good talk covering some aspects of the PRPL-50 pattern (50kb of js!) from their recent developer conference -

3 Likes

#23

Don’t forget bootsrap is one big CSS file. If you open it in a browser and view the non-minified version, you can see the CSS code used for all of the classes. All of these open source projects have code you can learn from.

2 Likes

#24

@r1chard5mith

That’s very interesting. Thanks for posting the link. After watching the video, it gave me some ideas that’s inspired by the same principles. I implemented it on a personal project (a startup biz) of mine.

The best I can do on PageSpeed insights is a desktop score of 88, and now increased to 89. (since I’m using a lot of CDN for some scripts, and can’t implement some of the Google recommendations).

Okay, background info: This is a site that uses/loads jQuery 3.x, and Bootstrap 3.3.7 on every page… plus my custom JS and CSS styles. And I think if you plan carefully, a site doesn’t necessarily mean it will be slow just because it’s using jQuery or Bootstrap. This is hosted on a $10/month shared Windows hosting plan (not a distributed cloud), every page has to be populated from a database with multiple INNER JOINs and WHERE filtering… again, on a shared SQL Server, so performance varies. The site is running on SSL, so there’ll be some delay there automatically a 1.5s penalty according to the video for handshaking stuff and shit.

CASE 1
Using Lighthouse speed metric, here’s a page that’s populated from a database, with an interactive Google Map that is drawn below the page fold. Since the Google map is below the fold, I decided to not render it during pageload, and instead only render it when it’s time for the user to actually see it. Results: 2.2s on 1st paint, and 5.3s first interactive.

The 9.2 second result is kinda unavoidable metric because Lighthouse script scrolled down the page in it’s test. and thus triggered the map draw.

In normal use, if the user didn’t bother scrolling down all the way down the page, this Google map draw won’t even be executed.

CASE 2
But here’s a page without using any Google maps… it’s a page listing of records, pulled from a database to build up the complete page server-side. I’m kinda surprised at the score. 2.1sec first paint, and 3.5s first interactive.

I think CASE 2 shows don’t underestimate building the complete page on the server-side, and just throwing it out to the browser to render it… that way, the browser doesn’t have to execute “expensive/slow” JS scripts, or limit JS execution to minimal, and only execute when as needed/required.

And here’s the JS library I use so I can control when to execute a JS library… depending on where/how far the user has scrolled down, or what event the user has triggered.

http://imakewebthings.com/waypoints/

1 Like

#25

Soupedenuit, what did you use for layout?

0 Likes

#26

Yes, learning the fundamentals is extremely important. I sort of think of jQuery as more of just a JavaScript shorthand than anything else. I mean, $("#message").html("Hello, World"); is a lot easier to type than document.getElementById("message").innerHTML = "Hello, World";

However, just because you can pull out a box of cake mix doesn’t mean that you shouldn’t try to learn how to make one from scratch.

2 Likes

#27

I lav cake. Now am hungry :T

0 Likes