JavaScript / Backbone.js layout manager - javascript

I have a number of (Backbone.js) Controllers with a bunch of child elements.
When the browser is resized or the model changes, I'd like child elements of various controllers to be able to affect the layout of other elements.
Let's say for example that I change language in the model and that this results in my headerController => titleTextField growing from 1 to 2 rows. This should cause the container below to shrink to accomodate for the growth.
Somehow, I'd like a layout manager to be able to take this into account and reposition dependent elements accordingly.
Are there such layout managers? Alternatively how would you build one?
(Preferably one that works well with Backbone.js MVC principles)

this sounds like a CSS issue, not a javascript / mvc issue. there are plenty of css frameworks out there, such as 960grid, blueprint, and many many more, that handle this sort of layout change

Related

Angular 4 - it is more expensive to handle styles of a generic component or work with specific components

I'm working on a hybrid application for which I need a toolbar. This toolbar must handle different forms and functionalities, in some cases contains a title, other buttons and links and in others an autocomplete, then my questions is if is more efficient to build a dynamic component that accepts all these elements or work on different toolbar's that will be inserted and removed from the DOM as needed.
Thanks!
A dynamic toolbar will be faster, because angular wont need to re-render the whole toolbar each time it changes. It's smart enough just to find the stuff it needs to update.
Also it will make your code easier to maintain I think. Having multiple toolbars, probably with some shared logic/elements will cause repeated code.
Also you will probably have less lines of code with a dynamic toolbar, perhaps slightly reducing the size of your project. I suspect that wont be significant. Honestly, I think the biggest advantage wont be speed but cleaner, more maintainable code in general.
It depends on whether you are using lazy loading or bundling your entire App in one main.bundle.js
In the first case, you want to ship the strict minimum to the browser as it's needed. Therefore, you want separate component for each use case.
In the second case, it makes your app lighter to create on single component to handle different toolbar use cases.
To demonstrate this, (assuming you're not using lazy loading) you can create a small project with a main component which uses 2 different views.
In one case you create a single component for each view.
In the other you combine both views in one component.
Then build and serve both and you can see the difference in the weight of your JS files.
Hope this helps

Completely different view for mobile

I have a SPA that needs to display my app in two completely different ways depending on the client device.
One shows a floorplan of my house with lightbulb icons to switch on/off my lights (and later on more information), rendered on a canvas using isometric projection.
The other (mostly for mobile) shows the same lightbulb icons alongside a name in a simpler list/hamburger menu.
I don't want to limit either device-type to the view I intended, but what is the best way of completely replacing the component based on device/selected view?
Should I create two components and move shared logic to services/classes? Or should I hide the unneeded component (I don't want to waste resources rendering the canvas or running the logic needed to render it)
If you use *ngIf or similar, then there is nothing rendered if the expression is false while [hidden]="..." causes HTML to be rendered.
Moving logic to services is a good practice anyway.
You could also load different router configuration depending on the view size
See also New Angular2 router configuration. This way you could load entirely different components for different view sizes.
(It looks like this will be improved in next versions for example to only load new child routes for a component, there are also discussions to provide an API to allow to add/remove single routes)

Implementing a horizontally branching nav menu

I am essentially trying to implement a DOM object that contains many different html templates and can be navigated using different options. I am comfortable with the AngularJS / controller side of this, but unsure about bootstrap and utilizing existing classes/directives.
My project is currently using angularjs, bootstrap, and angular ui-boostrap. The functionality I want is pretty similar to ui-bootstrap's accordion functionality but rotated sideways. But all the other options get hidden away when one is selected. Does something like this already exist? Also is there existing code/directive can I use to make the creation of this easier?
I plan for the menu's width and height to be mostly static so my only concern is creating this menu while giving it a clean 'bootstrap' feel.
I think I used this before and was happy with it:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
See issue in angular-ui/bootstrap also:
https://github.com/angular-ui/bootstrap/issues/2421

ExtJS - Applying JQUery UI themes

I am in the process of replacing a few JQueryUI components with ExtJS. The issue I am currently facing is how to apply our JQuery theme in ExtJS.
For example, my popup windows use .ui-icon-close-thick. However, to override this in ExtJS I need to set the .x-tool-close class to the same background-image & background-position. Does anyone know an easy way to accomplish this?
There is no easy way to do that — like there is no easy way to take the exterior off a car and seamlessly attach it onto the frame body of another car made by other vendor. Ext JS components are represented by certain distinctive DOM structures which your CSS rules should fit to.
The right way to do that (not very easy though) would be to create your own Ext JS theme that will mimic your jQuery theme.

Javascript widget inspired by iPhone UITableView?

Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?
infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.
I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList
Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.
Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)

Categories