I am working on a 2-year-old project that uses TS, Nextjs and styled components. We have around 120 components, most of them using dynamic styling using interpolation functions, and made sure we followed all the instructions outlined both in the NextJS and styled-components documentation in order to support SSR, such as this one (creating a custom document file, and declaring styled components outside the class/functional component itself).
However, we've been having a poor development experience, especially after compiling the project and loading the app onto the browser for the first time. Almost every page takes in average more than 30s to load (the amount of time is really inconsistent though, after many reloads the least I could get was roughly 15s).
After running the profiler many times, I noticed there was a really high number of calls to the insertRule and insertBefore functions from the styled components library. (green and bisque color at the bottom of the image). Sometimes adding up to a staggering 40+s of scripting time.
I am not quite sure if this is expected in dev mode, and we can put up with this for now since this happens only when we reload the page directly. However we have the feeling that this is probably an error in our implementation or configuration. So far, I have not found anything similar to this situation except for github issues closed 2 years ago and performance issues on styled-components already addressed as well.
Is there a way to improve this loading time?
NOTE I am not posting code snippets just yet since I am not sure what files could be relevant. If you need to take a look at specific files let me know and I will be more than happy to share them with you.
EDIT I left the project around 1 month ago and I can no longer provide code snippets nor give further updates on this issue. I am leaving this question here anyway in case someone else finds it useful or comes up with a good solution (for the workaround we took, please see comments below).
Related
Back in the day I successfully created an app with meteor and blaze, and applied material design to it.
Needless to say, I was very excited meteor and angular were getting paired up, so a few weeks ago I finally got around to giving it a try.
But, no matter what I try, I simply cannot get Material UI to work with angular2-meteor.
I cloned and tried https://github.com/Urigo/meteor-angular2.0-socially just this morning, can't get it to work - no matter how many errors I fix, it still finds new ones. Now it claims it cannot find the scss and html files, which are right there, even the EDA finds it with ctrl+click.....
I cloned and tried https://github.com/0mkara/meteor-ng-material-baby - same thing, endless errors, can't get it to work...
To make the long story short, is there any tutorial or clonable package which works with meteor angular2 material?
Our company is redesigning a web service as an SPA. I designed the rough version of frontend using jquery+css+html. but one of my features is the Tabs interface. It can have up to 8 tabs and it seemed to slow down the whole web app. Each tab contains a table with sth like 100+ rows with the exception of few tabs that has a bit more complex ui.
Now, we have this another company that's been assigned to complete the service with the backend modifications and apply the new ui. This company insists on using iframes to make it easier for multiple developers to work to together at the same time and also improve performance.
I honestly think this makes little sense especially considering the DOM structure is hardly complex nor long for each tab. But the truth is iframe is something i do not like for no apparent reason. So i was wondering if people can advise on why not to use it or even, why i should go along with it
This is a question that is still relevant, so I'll throw in an answer 4 years too late. SPA's can quickly become monolithic, especially for enterprise apps, with slow build times, poor developer experience, framework lock-in and increasing difficulty to coordinate frequent stable releases. This is a more-or-less acknowledged problem, to which the solution goes under the banner micro front ends.
Here's a thoughtful article on Martin Fowler, on micro front ends. You'll note that Iframes are the 2nd "best" solution for creating a shell for your micro front ends, despite the fact that no one wants to use them because they're old fashioned and not cool. They permit a good degree of isolation between frames (separate documents, separate scopes). They're simple and well understood. IFrames descend from framesets, released with Netscape 2 round 1996. Web purists were horrified, but they straight away permitted content panes to scroll independently of the navigation, giving us the left-hand navigation panel that's with us still. So there you have it, frames are a permanently unfashionable but robust and useful solution.
I think that this is a bad idea to use iframes for this purpose.
iframe is slow, and pass events and info between the main frame to the iframe is not so easy.
The answer for this is very simple, use web-components.
This is solution for multiple developers to work together at the same time.Each developer works on single or multiple web-component, and also make development faster when you can reuse and share components.
If you load the components and render them in the right time you can gain really good performance, better then iframe.
Now to your problem, you can do any tab as a component and only when the user move to this tab render it. Thus you dont have to render all the tabs but only one.
Take a look at polymer - a library that is a sugar syntax for web-component.
You can also look at the other frameworks angular,react...
I am styling a project built on Meteor and using LESS. I use Brackets for styling because its Live Preview feature makes working with CSS a lot quicker and more pleasurable, but by Meteor's nature it doesn't seem possible to use this feature.
Every little change I make on the code has to be detected by Meteor, who will in turn refresh the project on the browser for me, and this process is now taking anything between 5 and 10 seconds, which is entirely too much.
Does anyone know if it's possible to work on "live" CSS/LESS, using Brackets, in a Meteor project, without having to wait for Meteor to notice my changes and take its sweet time to refresh the whole thing for me?
Or at the very least least if there's anything I can do to shorten the time Meteor takes to update?
I don't think it is possible unless the developers of Brackets go an extra mile and implement a specific support tailored for Meteor.
Brackets works on top of raw CSS and HTML files and uses Chrome Dev Tools API to manipulate the page.
Meteor doesn't send raw files to the client. HTML templates in Meteor get compiled to JS DSL and CSS is concatenated and sent in a manipulated form, too.
Bracket's live preview feature would work only with quick page layout prototyping and will not play well with any modern front-end tool chain that involves compiling pages and stylesheets or preprocessing.
I thought I could just install Bootstrap 3 with Less into my Meteor app real quick and move on but it's been really problematic. I'm still just learning Meteor.
I added it with
meteor add less
meteor add simison:bootstrap3-less
Then I made a file imports.less in my {app home}/client/styles/ directory. In this file I put:
#import "/packages/bootstrap3-less/bootstrap.import.less";
#import "/packages/bootstrap3-less/lib/less/theme.import.less";
But apparently that no longer works since they updated Meteor's package manager. So I followed the directions on the github issues thread(https://github.com/simison/bootstrap3-less/issues/30). And that didn't really work how they said either. I just kept getting that the compiler couldn't find the two files. Finally Meteor stopped erroring when I changed it to this:
#import "../css/0-bootstrap3-less/lib/less/bootstrap.import.less";
#import "../css/0-bootstrap3-less/lib/less/theme.import.less";
Only now when the page loads in the browser it's just a blank white screen. I didn't change the html at all. Before I started doing this I had a form and h1 line there working(but plain and ugly). I made my form using aldeed's quickform which uses bootstrap3 by default. I've used bootstrap before but never with less. I thought it would be a good time to learn a bit about it.
Anyone have any clue why not even a line of text will show up now?
Note:
In defense of me asking a question since anytime I do I get clobbered by everyone and end up having my question closed within about 5 seconds. Yes there are very similar questions around on SO but I think only ones Sept 2014 or later would be valid.
It seems like this is the only relevant one from after the update: https://stackoverflow.com/questions/25655746/meteor-0-9-0-1-w-bootstrap3-less-not-finding-less-files Since I'm not getting the compiler errors anymore, which I think means it's finding the files now, I'm not sure if I'm still having the same problem as this question or if it's different. I don't have enough rep to comment on that question but it seems like the github issue thread they linked to never really comes to a resolution.
At this point I'm not even sure if it's an issue with me not understanding Meteor or an issue with me not understanding how to use Bootstrap with Less.
As far as i understood you are using simison:bootstrap3-less with Meteor 0.9.x. The README on github tells you:
NOTE: This package was good for Meteor 0.6.x-0.8.x and with changes in
Meteor 0.9.x the method this package uses isn't working anymore.
Notice that the README has been changed since this question was asked.
For Meteor 0.9.x you should use Meteor 0.9.x nemo64:bootstrap less
I am working with a client who has already purchased Magento -eCommerce CMS. I have never worked with this program and after reading over there extremely lengthy material I am not sure if I should take on the project. I am worried that this is a little outside of my skill set. I mostly do Design and Front-End Development. I have worked with Wordpress somewhat regularly without any problems, however that is extremely well documented. My understanding of actual programming is limited. Has anyone created a skin for Magento and if so, how complicated was it?
It depends on how you define complicated. Anyone with a good understand of Magento's architecture MAY actually call it intuitive. I can say that it has a significantly higher learning curve than many other packaged application in frameworks due to its shear number of features. It's extremely easy to think you done and found out from a client that there's a page you failed to style.
To better answer your question I'll tell you what you'll be facing.
CSS:
It is possibile, though difficult, to skin Magento using purely CSS. This can be made easier depending on your design.
HTML:
There are more individual templates than I'm willing to count. I want to say upwards of 40 ".phtml" files that you can edit each with an uncomfortable amount of logic to my taste (and I'm a programmer). For the most part you can manipulate the HTML within these files as you see fit with out any trouble. You probably will have trouble if you need to edit anything logic wise or that output by PHP
XML:
Magento uses xml files for what it calls layouts. These files are actually what puts the template files mentioned above together. To do some significant changes to the default layout you will have to change these.
Realizing that you referenced wordpress. Magento is SIGNIFICANTLY more difficult to skin than wordpress. Even after a very thorough understand of magento's architecture I still get hung up when changes. Magento is full of complex caches which can prevent your changes from being visible and unexpected dependencies which you can easily break if your not careful.
This is probably a horribly written answer but I hope it helps.