EmberJS + TailwindCSS: slow website in production - ember.js

I'm testing tailwind and ember for a musical website. I experience several bugs:
in dev server, all links start with a capital letter; on some links the capital letter disappears (live demo, artists). what a strange bug: I thought of correcting it by specifying "uppercase" on all links,
in production, the navbar doesn't show correctly; it should be like the first template of the webpage (the free template, https://tailwindui.com/components/marketing/sections/heroes),
the speed in production is not good. with vue and Django, I get a lighthouse mobile speed score between 100 and 97. with EmberJS, I get a mobile speed of 70, and a desktop speed of 90 (https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fthemusicstop.netlify.app%2F&tab=desktop)
Any help deeply appreciated. I want to use EmberJS instead of Django or Vue but I'm a bit concerned with all the bugs I face.
Edit: the only question I want to ask is the following: Why is Emberjs slower than VueJS and Django in production? Here is my source code: https://github.com/nsursock/musicstop
Mobile lighthouse score: 65
Desktop lighthouse score: 85
It seems vendor.js' size could be cut in half!

Without knowing more about your Lighthouse report I'd suggest the following.
The standard EmberJS build tooling is somewhat dated and does not provide the latest and greatest techniques out of the box. There's some history around this which I won't get into but TLDR is that techniques like tree shaking, dead code elimination and route splitting are not done (or at least not to the level you can achieve in 2021 if you configure tools like Webpack yourself).
Depending on the complexity of your application, I would suggest checking out:
Embroider https://github.com/embroider-build/embroider
Embroider Realworld Fastboot (a demo app) https://github.com/xg-wang/ember-realworld-fastboot
Using Embroider is still pretty cutting edge so it will probably come with some issues and quirks but its definitely worth checking out/trying.

Related

Django A/B Split Testing Packages (None I've found are well-documented and up-to-date.)

There are two main schools of thought for doing A/B (Split) Testing:
Javascript-based solutions such as Optimizely, Google Analytics Content Experiments.
Server-side solutions such as Django-AB, Splango, and django-lean. (Also, writing your own.)
My understanding is that Javascript-based solutions are spectacular for "which color button converts better," but not so great for switching out entire page layouts, and completely unworkable for trying out large functional changes such as the sequence of pages in a funnel.
That leads me towards a server-side solution. I'm not crazy about coding my own, and will do so only if there is no other option. I'm trying to add value by improving the core functionality of my site, not by creating a better split-testing framework.
The Django apps I've found for split testing are various mixtures of unmaintained, undocumented, documented incorrectly, and incompatible with Django 1.5. This surprises me, because the Django and Python communities seem to have a strong focus on good documentation. I'm also very surprised that none of the testing frameworks I've tried has been compatible with Django 1.5 -- is testing not as core a part of the philosophy in the Django/Python world as it is in Rails?
Here's what I've found:
Splango https://github.com/shimon/Splango -- Not compatible with Django 1.5 (although most compatibility bugs I found were trivial to fix). Largely un-touched since October 2010, except for a fix August 2012 which claims to make sure templates get included in the install. Since templates don't get included in the install when Splango is installed via PyPI, either the fix didn't work or didn't get submitted to PyPI. Documentation is largely accurate, but doesn't completely cover how to set up tests and get reports. It tells you how to configure the template to gather the data, but there appears to be additional steps required in the admin interface which are completely undocumented, and I'm not sure I've done them properly.
Django-lean. Original at https://bitbucket.org/akoha/django-lean has not been updated since July 2010. There is an apparently "blessed" fork at https://github.com/anandhenry2002/django-lean which has not been changed since May 2012, when it was copied over from the original. The original's documentation is incorrect in ways that make following the examples impossible. (Though you can probably muddle your way through, as I did.) The new version's documentation has formatting problems that make it difficult to read on github. (This appears to be because it's the unchanged documentation from the old project, and BitBucket syntax doesn't work on Github.) The django-lean Google Group has not had a message since July 2012.
django-mini-lean https://github.com/DanAncona/django-mini-lean -- Updated as recently as February 2013, but undocumented.
Leaner - https://bitbucket.org/brianjinwright/leaner -- Last updated July 2012, and no docs.
Django-AB -- Last updated May 2009. Is not a package, and can't be installed via PIP or PyPI. After placing the checkout in my django app folder (and renaming the folder to ab) and following the installation instructions, I get an error loading the template loader that I have not tracked down further.
So far Splango appears to be the winner, as I've actually been able to get it more-or-less working (by manually installing the templates, and then editing them to fix Django 1.5 incompatibilities).
Can anyone point me to anything I've missed?
You have missed this app : https://github.com/mixcloud/django-experiments + https://github.com/disqus/gargoyle/
And then there's waffle: http://waffle.readthedocs.org/
It's simple, updated, maintained, but not very feature rich, it doesn't have any analytics/reporting stuff integrated. But then again, google analytics or mixpanel type of service is better for this.
I first looked at Django-AB and that is almost what I wanted, but I couldn't get it to work either. After looking at django-experiments and deciding I didn't want to mess around with redis yet, I decided to roll my own. I've tried to package it up nicely and make it easy to use for the beginner. It's super basic.
https://github.com/crobertsbmw/RobertsAB
You can swap out entirely different page layouts with Google Analytics Experiments (their default experiment setup will redirect users to a different URL for each variation you have), although in general its much easier to interpret why something is more successful if you test smaller things against each other.
You are right that testing different funnels and user flows against each other using Google Analytics would require a lot of manual setup; although theoretically you could do it by swapping out different links and tracking your users with UTM campaigns.
For smaller A/B tests within the same page, I ended up using Google Analytics Experiments and writing a custom Django CMS plugin for adding a few variant options to a template, which queries the Google Analytics API and displays the correct variant using Javascript.

Getting d3.js to work with raphael.js

I have recently implemented some data visualisation using d3.js, I'm now trying to get this to work for Internet Explorer browser versions 7 and above. The common suggestion to get this to work, is to combine d3.js with raphael.js, which is a cross browser graphics library.
There already seem to be some implementations of such libraries such as
r2d3.js :
d34raphael.js :
I'm trying to understand if these existing implementation already have d3's capability of data binding and the physics implementation of the force layout to implement something as simple as this d3 example : http://bl.ocks.org/1095795
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.

How can we improve our web development workflow?

How can multiple developers work on the same website (CSS, JavaScript, ASP.NET).
We use SVN as source control, but the problem is more in regards of testing and general workflow.
I know we could do unit tests and we have for our API, but I don't see how we can do unit testing for our frontend?
We get a lot of problems in the frontend like:
Developer 1 changes CSS and it messes up CSS for developer 2.
Developer 1 changes JavaScript and components developer 2 made stops working.
Developer 1 removed an ID or a CSS class in C# (code behind) and CSS styling is lost or JavaScript stops working.
It's basically things of that nature.
What we do now is manually test everything in all major browsers and we spend too much time on that.
Any good suggestions on how we can improve our way of working? Keep in mind that it's a website and we are struggling with problems related to that.
This is a management issue rather than a workflow issue.
You need to be proactive at managing the situation and be tough.
You have a source control system in place, what you need to do is:-
Enforce day end (or more frequent if preferred) check ins.
Rollback work if it doesn't work. You have to be tough on this point to ensure the developers understand that you mean it.
You need to actively communicate the above to your team to make sure they understand the new work procedures.
It'd only take a few weeks for it to sink in, after that you can relax the controls.
Introduce releases/iterations/milestones; and publish them only from the repo.
Can you not possibly break the site areas up into segments and assign developer responsibilities to each, even if it means sandboxing the "base" code of the site (framework / main CSS / main JavaScript) and assigning a specific responsibility to it? You can then task developers to keep their CSS / JavaScript separate from the main files and merge them before testing and release.
We've had similar problems where I work and this approach seemed to sort it out for the most part. For each segment we built we created a new folder in each of the respective projects (DAL / BL / Presentation), based on the functionalities / modules / segments, each with their own site content (JavaScript / CSS), but still making sure that some generic styling and JavaScript being available to all developers.
An official Agile project management methodology (like Scrum) has huge benefits in an environment like this, as you get to discuss these issues on a daily basis and, if over-arching requirements for new CSS and JavaScript are identified by all developers, it can be integrated into the site's base content.

CMS+blog+e-commerce: django or web2py [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
At the moment we are running few smaller PHP sites (small company, private, non-profit org, friends...) and would like to migrate them to Python in order to be able to tweak them more easily and/or extend their functionality due to being familiar with Python although without real experience using some of the Python frameworks.
In order not to write everything from the scratch, we'd need decent CMS, blog and some e-commerce module.
We did some research, installed and tried few apps in Django world and so far have arrived to the two possibilities:
Django-CMS as CMS, Zinnia as blog engine and Django shop as e-commerce or
Mezzanine which integrates CMS+blog and Cartridge as shopping cart application.
Both combinations are nice, although not perfect...At the moment there is problem integrating released versions of django-cms & zinnia due to their usage of non-compatible versions of django-mptt or e.g. Mezzanine is missing some features like linkback support in blog etc.
While playing with the above two sets of apps, we heard about Web2py and must say that we like lot of things there...
We are aware it's younger project with smaller community, less apps etc., but wonder if there is some set of web2py applications which can compare with the two above-mentioned Django sets so that we can choose to start with Web2py, learn it and in that process replace PHP sites with it?
So, we would like to have some capable CMS+blog with the following features:
tag cloud, categories
spam protection
RSS feeds
multiple authors
threaded comments (optional)
linkback (pingback/trackback) support
(easily) theme-able
markdown/reST markup for writing content/posting
multi-lingual support
As far as e-commerce is concerned, besides easy integration with CMS+blog apps we do not need anything spectacular - our 'company' is selling 'services', so no need for thousands of products (only 10s of them), no complicated shipping options so something like:
multi-lingual support
basic infrastructure for payment methods (e.g.) PayPal and we would need to write a custom module for form-based API
simple shopping cart able to handle simple product descriptions
tax calculations and
(optional) PDF support
would be everything what we would need.
Considering the features we would like to have, our (non)experience working with any framework, which one - Django or Web2py - you consider is more suitable in terms of ease of learning, ease of use, application support etc. ?
I've sent two posts to web2py list and (maybe) because my query was not specific-enough (or some other reason) I did not receive any reply there and I saw there are some apps like KPAX CMS which looks old/non-maintained. Otoh, there is Powerpack which incorporates Instant Press but I'm not sure about availability of e-commerce component. Finally, I've found out about plugin_wiki which seems to be new/young app, but, considering we found* out about possibilities in Django-world, we would like to learn about the situation on the Web2py scene in order to be able to evaluate both options better.
p.s. it would be nice if Appliances list would be organized a bit better so that it's easy to find out what is maintained, where is project page etc.
I've had a lot of success with Django-CMS. It's very, very easy to write custom content-type plugins, extend menu nodes with custom nav elements, such as a list of product categories, etc. It's dead-simple to hook custom application code to any page in the navigation hierarchy.
As you mentioned in your question, Zinnia also plugs into Django-CMS for a nice blogging solution that is also extensible. Adding a cart app, whether it's from the DIVIO team or not should be an easy task.
Django, DjangoCMS and Python in general, have very low learning curves in my opinion. In 14 years of development, Django is the only web framework that hasn't gotten in my way, and Python is an absolute pleasure to work with on a daily basis.
I think you'll find that the Django ecosystem is much more holistic than any of the other Python frameworks, it's also very, very well documented and there are literally hundreds of 3rd party apps. Plus, Django admin can potentially save you many weeks of dev time, and you can override, skin and extend it to do just about anything.
My $0.02 :)
-- EDIT --+
Yeah, right after I posted I realized I was heavy on comparison of frameworks but light on suggested solutions to your problem (i.e. existing appliances). I think that Django probably has more matured addins/apps. That being said, crafting your own blog in web2py (a simple blog) is probably only a little harder than configuring one for another framework.
There is the wordpressclone appliance: http://web2py.com/appliances/default/show/36
(you can extract existing wordpress data and get it in here, i'm pretty sure there's a WP export and an import function on this appliance)
There is an e-store (haven't used it): http://web2py.com/appliances/default/show/24
There is KPax CMS, as you said, but i think this one might be out of date, unless it was updated recently. The integration between these should be possible, you can share sessions across apps and I think if you have the same auth_user db, it should work.
I would try installing these and see if they are close to meeting your needs -- especially KPax since I'm not sure the state it's in.
-- END EDIT --
Both Django and Web2py are very good frameworks in my opinion. I think you would be happy with either. That being said, having not used frameworks I would say to with web2py, unless you NEED certain modules that only exist in the django world. Web2py probably has a little more gradual learning curve. Also, it can do RSS out of the box, there's a screencast somewhere showing how to create a blog app in about 5 minutes (including comments), and the community is (usually) very responsive. I don't think there is anything that web2py can do that django can't (except DB migrations -- but i think you can make django do them with some 3rd party code), or vice versa.
Django favors a "explicit is better than implicit" development methodology, which requires to you import various modules and doesn't have all the "magic" of web2py. Using django, you will be more aware of exactly what is going on under the hood. The django templating language is easy to learn and provides a lot of functionality for common markup tasks. Their is a LOT of documentation, a larger user-base and tons of 3rd party modules/plugins/whatever.
Web2py favors a "everything should have a default" approach, and enables to to focus on the big picture without getting bogged down by the minutia of web development. I'm not saying this is in contrast to django, but rather that web2py is very strong on this point. It allows you to rapidly develop applications, and takes the headache out of things like updating a table schema (i.e. it does database migrations). I also prefer web2py's templating language to django's, as it allows pure python and does not require one to learn a separate templating language at all.
I think both frameworks have decent internationalization/localization features. I'm not sure if Django's is still under development or not? Web2py's is easy to use, but I think you might have to provide a lot of the translations yourself.
As for the lack of replies on the web2py list, maybe it's because this topic is becoming more and more frequent? I'm not sure. You could ask people on the web2py freenode channel.
Also, definitely check out this link:
Django vs web2py for a beginner developer
The first response is from the lead developer of web2py, but I think he makes a fairly balanced comparison.
Also, the previous thread includes a link to here (the good and bad of web2py):
http://www.mengu.net/post/django-vs-web2py
web2py is a great framework, but currently light on reusable CMS, blog, and particularly e-commerce applications. It sounds like you have already stumbled upon the main options -- plugin_wiki, Powerpack, and Instant Press.
I don't think there is a mature and currently maintained e-commerce application, but you may be able to make use of web2py-estore. There are also some options for accepting credit card payments (see also).
plugin_wiki includes comment functionality, and there is also plugin_comments. For PDFs, pyfpdf comes with web2py, and there is also web2py_appreport. web2py also includes RSS support.
EDIT: Also, another web2py CMS under development, to be released soon: SimplrCMS

What are the gotchas with ColdFusion?

Background:
I have a new site in the design phase and am considering using ColdFusion. The Server is currently set-up with ColdFusion and Python (done for me).
It is my choice on what to use and ColdFusion seems intriguing with the tag concept. Having developed sites in PHP and Python the idea of using a new tool seems fun but I want to make sure it is as easy to use as my other two choices with things like URL beautification and scalability.
Are there any common problems with using ColdFusion in regards to scalability and speed of development?
My other choice is to use Python with WebPy or Django.
ColdFusion 9 with a good framework like Sean Cornfeld's FW/1 has plenty of performance and all the functionality of any modern web server development language. It has some great integration features like exchange server support and excel / pdf support out of the box.
Like all tools it may or may not be the right one for you but the gotchas in terms of scalability will usually be with your code, rarely the platform.
Liberally use memcached or the built in ehache in CF9, be smart about your data access strategy, intelligently chunk returned data and you will be fine performance wise.
My approach with CF lately involves using jQuery extensively for client side logic and using CF for the initial page setup and ajax calls to fill tables. That dramatically cuts down on CF specific code and forces nice logic separation. Plus it cuts the dependency on any one platform (aside from the excellent jQuery library).
To specifically answer your question, if you read the [coldfusion] tags here you will see questions are rarely on speed or scalability, it scales fine. A lot of the questions seem to be on places where CF is a fairly thin layer on another tool like Apache Axis (web services) and ExtJs (cfajax) - neither of which you need to use. You will probably need mod-rewrite or IIS rewrite to hide .cfm
Since you have both ColdFusion and Python available to you already, I would carefully consider exactly what it is you're trying to accomplish.
Do you need a gradual learning curve, newbie-friendly language (easy for someone who knows HTML to learn), great documentation, and lots of features that make normally difficult tasks easy? That sounds like a job for ColdFusion.
That said, once you get the basics of ColdFusion down, it's easy to transition into an Object Oriented approach (as others have noted, there are a plethora of MVC frameworks available: FW/1, ColdBox, Fusebox, Model-Glue, Mach-ii, Lightfront, and the list goes on...), and there are also dependency management (DI/IoC) frameworks (my favorite of which is ColdSpring, modeled after Java's Spring framework), and the ability to do Aspect-Oriented Programming, as well. Lastly, there are also several ORM frameworks (Transfer, Reactor, and DataFaucet, if you're using CF8 or earlier, or add Hibernate to the list in CF9+).
ColdFusion also plays nicely with just about everything else out there. It can load and use .Net assemblies, provides native access to Java classes, and makes creating and/or consuming web services (particularly SOAP, but REST is possible) a piece of cake. (I think it even does com/corba, if you feel like using tech from 1991...)
Unfortunately, I've got no experience with Python, so I can't speak to its strengths. Perhaps a Python developer can shed some light there.
As for url rewrting, (again, as others have noted) that's not really done in the language (though you can fudge it); to get a really nice looking URL you really need either mod_rewrite (which can be done without .htaccess, instead the rules would go into your Apache VHosts config file), or with one of the IIS URL Rewriting products.
The "fudging" I alluded to would be a url like: http://example.com/index.cfm/section/action/?search=foo -- the ".cfm" is in the URL so that the request gets handed from the web server (Apache/IIS) to the Application Server (ColdFusion). To get rid of the ".cfm" in the URL, you really do have to use a URL rewriting tool; there's no way around it.
From two years working with CF, for me the biggest gotchas are:
If you're mainly coding using tags (rather than CFScript) and formatting for readability, be prepared for your output to be filled with whitespace. Unlike other scripting languages, the whitespace between statements are actually sent to the client - so if you're looping over something 100 times and outputting the result, all the linebreaks and tabs in the loop source code will appear 100 times. There are ways around this but it's been a while - I'm sure someone on SO has asked the question before, so a quick search will give you your solution.
Related to the whitespace problem, if you're writing a script to be used with AJAX or Flash and you're trying to send xml; even a single space before the DTD can break some of the more fussy parsing engines (jQuery used to fall over like this - I don't know if it still does and flash was a nightmare). When I first did this I spent hours trying to figure out why what looked like well formed XML was causing my script to die.
The later versions aren't so bad, but I was also working on legacy systems where even quite basic functionality was lacking. Quite often you'll find you need to go hunting for a COM or Java library to do the job for you. Again, though, this is in the earlier versions.
CFAJAX was a heavy, cumbersome beast last time I checked - so don't bother, roll your own.
Other than that, I found CF to be a fun language to work with - it has its idiosyncracies like everything else, but by and large it was mostly headache free and fast to work with.
Hope this helps :)
Cheers
Iain
EDIT: Oh, and for reasons best known to Adobe, if you're running the trial version you'll get a lovely fat HTML comment before all of your output - regardless of whether or not you're actually outputting HTML. And yes, because the comment appears before your DTD, be prepared for some browsers (not looking at any one in particular!) to render it like crap. Again - perhaps they've rethought this in the new version...
EDIT#2: You also mentioned URL Rewriting - where I used to work we did this all the time - no problems. If you're running on Apache, use mod_rewrite, if you're running on IIS buy ISAPI Rewrite 3.
do yourself the favor and check out the CFWheels project. it has the url rewriting support and routes that you're looking for. also as a full stack mvc framework, it comes with it's own orm.
It's been a few years, so my information may be a little out of date, but in my experience:
Pros:
Coldfusion is easy to learn, and quick to get something up and running end-to-end.
Cons:
As with many server-side scripting languages, there is no real separation between persistence logic, business logic, and presentation. All of these are typically interwoven throughout a typical Coldfusion source file. This can mean a lot more work if you want to make changes to the database schema of a mature application, for example.
There are some disciplines that can be followed to make things a little more maintainable; "Fusebox" was one. There may be others.