I have an Angular 2.x app that leverages Lodash in its components, and I'm considering using it in the view templates as well.
I've noticed that Angular (in switching from 1.x to 2.x) dropped support for some of its more intensive view template pipes (like filter and orderBy) for "performance reasons," and it now says to "do it in the component."
Should using Lodash in the view follow the same advice? Is there a "performance reason" why I shouldn't be using Lodash (or comparable libraries) in the view? Are there times that it doesn't make a difference and times that it does?
Some example usage could be the following:
<div *ngIf="_.isEmpty(someVariable)">
....
</div>
<div *ngFor="let x of _.union(arrayOne, arrayTwo)">
....
</div>
Thanks for any input! The project in question is open source and hosted here.
Using lodash function or any calculation function on template binding is risky.
Angular change detection will run this function way too many times then you intended and this may cause lags or infinite loops, bind variables instead.
trigger loadash or any calculation on component hooks is much more efficient.
Related
I have an issue with Ember.Select views taking really long to render. Ember Inspector gives me rendering times of around 20-30ms for vanilla built in Ember.Select views (http://emberjs.com/guides/views/built-in-views/). That's fine with one or two Select fields but really adds up when you go beyond a few of them...
Here is an example of a basic Select JS Bin: http://jsbin.com/xawak/10/.
Are there any best practises to get around this?
Its an issue of the ember JS select component which unfortunately has up until 1.8.0 still not been resolved. The problem is probably caused by the fact that the component sets up bindings for each option of the select which is an expensive operation.
There is an issue for this already.
I mostly bring JSONs with my ajax requests, but sometimes I do bring HTML snippets.
For example there are these forms I use for creating things in my application: "create user", "create message", etc. I need to reuse them a lot, and I bring them with ajax calls, as opposed to having them preloaded and hidden.
My question is:
The scripts and css's that give functionality and style to these loaded html's, should be preloaded or should they come with the html as well?
Example of loaded html:
create_message.html
-------------------
<div id="create-message-form">
...
<button id="submit-message">Send</button>
</div>
The script that gives functionality to this form needs to set a click-handler to "#submit-message" and other stuff related.
create_message.js
------------------
$("#submit-message").click(...);
...
Should that script be pre-loaded or be in the create_message.html snippet?
I would generally tend to pre-load the script, as it makes it so you have to load it only once and simplifies your architecture quite dramatically. Only if it makes speed wise a drastic difference I would consider loading it as needed - but the moment you need to access that part of the system twice you lost your speed gain.
However, if most of your communication is JSON already I would recommend checking out some of the client side templating solutions. This one for example: http://handlebarsjs.com/ or Underscorejs has a template function.
I'm using the Kendo ASP.NET MVC wrappers. I noticed the wrappers are rendering the scripts to initialize the controls immediately after the control markup. Is there a way to configure to have the scripts render at the bottom? Before, with the Telerik ASP.NET MVC controls, you could have the script manager render all the initializations at the bottom. Is that possible?
In the 2013 Q1 release, they added support for deferred scripts. You can use it like so:
#(Html.Kendo().AutoCompleteFor(m => m)
.Filter(FilterType.Contains)
.MinLength(2)
.DataSource(config =>
{
config.Read(action, controller, routeValues);
config.ServerFiltering(true);
}).Deferred())
Note the Deferred() method in the end of the chain. Then, in your layout add the following anywhere in your markup:
<!-- ... -->
#Html.Kendo().DeferredScripts()
</body>
</html>
See
http://www.kendoui.com/forums/mvc/general-discussions/kendo-initialization-scripts-in-body-interfere-with-other-libraries.aspx for more information.
This would be a bit of a headache, but since the wrappers generate jQuery script couldn't you generate the wrapper in a partial view, grab the resulting script and inject it into a script tag at the bottom of your page? Of course, that would mean either duplicated code or a fair amount of code to generate the workaround in a reusable way, all so the scripts end up at the bottom of the page instead of the middle.
I'm assuming this is to help with performance (best practice generally being to put your CSS at the top and scripts at the bottom)?
I am sorry this is not possible and could not be work-arounded. The scripts of the Kendo Wrappers for MVC are always rendered after the html wrapper of the widget.
It is mentioned in the documentation.
EDIT: This is later on possible with the deferred scripts rendereding that jrummell exiplained.
We're actually planning a really complex web application. At least for my own standards.
In the past we have always been using a combination of a server side MVC Framework (Codeigniter) and client side functionality (jQuery and plugins). We have simply written inline javascript code in our views. This worked as expected, but of course with several disadvantages:
no caching
duplicated js code
maintainability issues
...
My main goal now is to organize the client side code in an efficient and easily maintainable way. But I want to stay with the server side MVC because of the existing know how and some existing interfaces. Furthermore I want to reduce complex DOM manipulation with jQuery and "spaghetti code".
Now I thought about a combination of Backbone.js and Require.js but I really can't find a tutorial or any solid description about how to combine them with a server side MVC.
Is it even recommended?
In my old apps I got a file structure like this:
application (CodeIgniter)
assets
js
css
imgs
Are there any ideas or best practices?
Thank you!
To add to mexique1's advice, it might be worth looking at the backbone-boilerplate project. It should provide you best-practice solutions for many of the problems you're currently considering, such as the combination of require and backbone, the organisation of the client-side of your project, and the reduction of complex DOM manipulation (see templating).
The challenge, as you anticipate, will most likely be in combining the boilerplate approach with the approach you're used to. However, it will almost certainly be worth the effort since it should provide you a solid foundation for this and future projects.
I think Backbone is a good choice, and Require is not mandatory here.
Require will just help you organize your source code and maybe improve performance. I think you can start right away with Backbone, which will be the thing you are going to use most, and add Require later.
Regarding Backbone, yes it's easy to use to use its Model with an existing MVC application, provided it returns JSON. To load your existing data you will want to use the fetch method combined to url to adapt to your existing code, or your own method.
Generally, think about which models are displayed in which views. Backbone helps you think this way : I'm displaying Models represented as JSON data in Views which are made by HTML.
Also, for the view layer, it's very easy to reuse your existing HTML, because views are not tied to anything, no JavaScript templating or nothing.
Simple example :
<div id="user">
<span class="name">John</span>
</div>
var UserView = Backbone.View.extend({
render: function() {
this.$el('.name').html(this.model.get('name'));
}
});
var userView = new UserView({el: $('#user')[0], model: ...});
In this example the #user div reflects the state of a User model, with its name.
Also check the Todo App example in Backbone.
I'm using django ModelForm and django-crispy-forms to create beautiful bootstrap forms.
I didn't find any way to generate inline checkboxes like the one available here.
Even using crispy FormHelper(), no way do define fields like:
Field('checkbox1', css_class="inline"),
Field('checkbox2', css_class="inline"),
Field('checkbox3', css_class="inline"),
where checkbox1, checkbox2 and checkbox3 are defined in the model as model.BooleanField.
Any idea?
I'm the lead developer of django-crispy-forms and all I can say is that this is not currently supported. I will try to work on a patch as soon as possible, I will keep you posted.
UPDATE 2012/9/24
django-crispy-forms 1.2.0 has been released today and includes a bootstrap.InlineCheckboxes layout object, for rendering Django CheckboxSelectMultiple widgets with inline checkboxes. I'm not currently planning on supporting a layout object for rendering several BooleanFields this way. That makes probably more sense as a custom personal layout object.