I am looking to use Backbone Marionette in my application with RequireJS. It looks very promising,especially the Views and Regions. I would like to use them in my application but use some of the existing features already present in my application.
For example,I would like to use my existing Event Aggregator instead of Backbone.Wreqr. Can I do that? Is Backbone.Wreqr hard dependency for Marionette or can Marionette work without it?
Also I would not like to include pieces of Marionette that I do not plan to use in my application, like modules, templateCache, etc.
Is it possible to have a trimmed version of Marionette?
Thanks
Chintan
Currently, Marionette has hard dependencies on multiple libraries. From it's documentation:
Prerequisites
Marionette relies on Underscore, Backbone, jQuery, and various other libraries as its foundation.
JSON2.js
jQuery (v1.7, v1.8, v1.9)
Underscore.js (v1.4.4)
Backbone.js (v1.0.0)
backbone.wreqr.js
backbone.babysitter.js
As far as picking and choosing features, Marionette's code is split up nicely with each main feature in it's own file. You might be able to copy the repo and do one of the following:
AMDify each feature to use with requirejs
Piece together the files/features that you want and amdify the resulting combined file
Rip out the features that you don't want from the generated amdified file.
With any of the routes, be sure to get the dependencies between the features lined up correctly (i.e. Layout depends on ItemView, which depends on View, so you'll need to keep View and ItemView if you intend to use Layout).
Related
I am using in my Nativescript Angular app the nativescript-google-maps-sdk plugin which works great.
My issue is that I want to use cached images to display in a custom InfoWindow. For this purpose I am using the nativescript-web-image-cache plugin app-wide. When I use the regular <WebImage> tag in the infoWindow it complains that it is not a registered component:
Module 'ui/web-image' not found for element 'WebImage'
Everywhere else in the app it works just fine. In this issue is it suggested that:
that InfoWindowTemplate content is parsed as Vanilla NativeScript XML, not as Angular XML thus it is not able to find custom Angular Component you created
So the question is how can I still use this plugin? Is there a way I can somehow register the <WebImage> component so it will work in the custom InfoWindow?
Just to make sure there is not another issue, I added the nativescript-web-image-cache plugin to the plain NativesScript nativescript-google-maps-sdk demo project and then the <WebImage> tag works just fine.
Any pointers are highly appreciated!
Anything registered in Angular is not available in Core the same way; so if you have to create a core template; you must also pass in the xmlns:blah="ns-blah" as part of the core template, so that it is registered properly in that core template. The angular registerElement does not do anything for Core. Now you can easily do <IC:WebImage xmlns:IC="nativescript-web-image-cache" ...> and then it is valid in the template. However, I would recommend you put the xmlns:IC on the topmost element you can; as it makes reading the code a lot simpler. But in cases you don't have a parent wrapping element around the item, this is valid code to register it on the same element using it.
NS-Core templates are different than NS-Angular templates; if you attempt to use things that work in Angular like <IC:WebImage [param]="value" (param)="value"/> both the [param] and (param) will totally break template parsing in core. NS-Core's parser is like HTML, nothing is supposed to surround the param and the value should be in quotes. The value can have {{ boundvalue }} to bind a dynamic value into the template.
Normally when passing a NS-Core template into whatever function you need; you want to pass in just the minimal parts; you rarely need to use things like <Page>, <Frame> or any other top level elements. In fact this can cause problems. You normally need just the piece of the layout you are going to have it view. So in this case <StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>
Finally when troubleshooting using Core features in Angular; I highly recommend you put fixed Width/Height and Background colors on each element. This can sometimes show you what is failing.
As InfoWindowTemplate content is parsed as Vanilla NativeScript XML, you could add xmlns:IC="nativescript-web-image-cache" to the root / parent element of your component. Also use <IC:WebImage> instead of WebImage.
I have a library that has a store for my grid data. That library is used within our application. I just tried to use a selector from the library within our application, but its not receiving new data.
So what I want to do is use a selector from my GridState (mistyped it GridStore in my image) from a component in my appication.
Is this something that is possible? I tried using forRoot in the library, but then nothing loads for the libraries components.
Is it possible to otherwise maybe create another shared library with my complete store, so that I can use the selectors from both projects? Is there some kind of best practice/normal way to do this?
I started developing a desktop-class application using Electron, and am referring to the starter app as well as the Electron API demo app. This application has a single screen with multiple sections. Interaction within one particular section can cause other section(s) to get updated. These interactions must be in sync with an underlying model [object]; two-way data binding could be helpful here.
What is a recommended way to achieve a multi-section window with each section interacting with one another? Should I compose the layout using DIVs and CSS, or is there a library that I can use effectively with Electron? I was thinking about Handlebars or Jade but I am not sure if I need a template engine, as the entire screen is not rendered and only particular sections will be updated.
We have to implement multiple-document-interface web application. Each document has to live in a separate tab (but on the same page, it has to be SPA). There may be up to 50 opened tabs simultaneously and application should give ability to group tab panes by modules.
One of our options were to use AngularJS for this task. We like the way Angular handles partial views, structures application by using modules/controllers and performs dependency injection.
After digging in for couple of days, we've figured out that there may be some problems with the way bindings work: there is no easy way to prevent angular from watching tabs, which contents are not currently displayed to the user. You can imagine situation when user will have around 20 opened tabs and this whole thing becomes slow as hell! Also our application is very grid-heavy, so for grids I think we should avoid ng bindings at all.
We were thinking about ng-view and the way it recreates DOM on each activation ... this looks overkill and will force us to put all UI state into the view-models, even for scroll-bars :)
Can you suggest some possible ways to improve performance with Angular and MDI? Maybe we should even consider using some other ui-framework/set of tools to achieve same results?
What's important:
modularity (AMD)
dependency injection
declarative bindings (we do like how angular and knockout solved those problems)
MVVM/MVC
ability to create multiple instances of the same controller (open multiple "details" tabs for each specific item from the grid, for example)
modularity - Angular has it's own modularity rules/patterns which are good if you want to conform to them, but if you want to make something modular in a different way, eg... allow forms to be self contained so that multiple instances of them can dynamically be opened concurrently it's quite difficult
dependency injection - Angular allows you to write code that you can inject other into, but you cannot inject Angular, it seems an oversight that you cannot test your code isolated from Angulars?
declarative bindings - yep, the way Angular binds literals within HTML with the JS code makes it really hard to create MDIs with multiple concurrent instances of a single form. You really need to dynamically create your form instances with their own identifiers (in addition to Angulars) then scope your own identifiers within the bounds of a shared set of JS files (which is what you want), however then Angular's binding will get in the way of each instance if you continue to use Angular's bindings - alternatively you can try modify the HTML dynamically get Angular to refresh it's bindings.
Basically anything to do with MDI is harder than it needs to be with Angular and it's worth looking at alternatives for such projects before hand.
AngularJS can indeed be heavy on a big application, but only when you make a change inside the $scope. The bigger part of this time is spent looking for modification by dirty checking.
If you keep an AngularJS application inside a non active tab, a dirty checking can only happen after a outside event (like a WebSocket message). You can optimize your application to remove those listener when the tab is not focused.
If you follow the best practice of AngularJS, performance issues with a lot of pages opened should not be a problem. The bigger performance problem of AngularJS come with very big amount of data inside its $scope, but there is a lot of solutions proposed all over the internet.
The context is that I don't want to use Zend MVC - controllers, helpers, decorators etc - that's overkill for what I am writing.
I've scoured the jQuery site plugins section and these issues bother me most:
I have to search a lot for plugins - it is tedious.
I have to check dependencies with jQuery versions. Thankfully I decided to stick with only jQuery or noConflict() would have driven me crazy.
I have to hook-up all the id's and names of form elements across HTML+CSS+JQuery through Controllers, Views etc.
And all this because there is no other simpler PHP wrapper over jQuery plugins than ZendX_JQuery - and plugins is where the attractive scripts and effects are.
Writing a in-house replacement to ZendX_JQuery will be a huge task in itself. But if you have to wrap third party jQuery plugins in PHP and maintain the thing it is full time job in itself.
So I want to know if Zend_Dojo is much easier than ZendX_JQuery. I'm asking before trying out because I'd have to spend a couple more days installing, configuring and testing all the standard Dojo controls and then I can decide. All that's tedious for a rather simple app which may grow later on.
The alternative would be a "jQuery-inside" PHP widget library that is stable and will work for a year without being broken or upgraded.
Something like GWT or ZK or ASP.Net where you don't have to do low-level HTML+jQuery coding and hand-tweaking for every page with all the ajax controls and form elements.
Or should I just drop an MVC framework altogether and replace it with a custom set of scripts only using Zend components where necessary - like Zend_Validate, Zend_Form etc.
I've been working on desktop apps for some time and the switch to AJAX + MVC + Zend is proving a bit too unwieldy, especially given the abundance of design patterns in Zend MVC.
My recommendation would be to use neither ZendX_JQuery or Zend_Dojo. By the sounds of it, that's overkill for you as well. My thoughts may be coloured by the fact that I don't like to mix PHP and JavaScript code except where absolutely necessary - yes, it may be easier to let a component write your JavaScript for you, but it's never going to be as clean as you could write it yourself.
That way, you also maintain separation between behaviour and presentation - always a good thing, as it makes it easier to use the concepts of progressive enhancement.
I agree with Stephen Orr- I use neither jquery nor dojo (after trying both). I use Zend_Form filters / decorators heavily because client side validation has to be redone on the server side anyway. With some custom decorators, you can do it all in html/php.
I try and avoid ajax where possible, and use prototype / scriptaculous where it cannot be avoided. They are lightweight and provide handy shortcuts to use in other JS code.