Knockout in Rails 3 - ruby-on-rails-3

if I'm using rails 3 which uses asset pipeline to compile all
Javascripts, does that mean I can have only one Knockout view model for my entire application? If not, how do I specify which view model is binded with which view? In the tutorial code, it looks like 1 view model is bound per page, but that doesnt work in rails since all JS are loaded upon first page load.

No, you do not need to include all javascript on every page! This is a very bad idea.
There are many methods for limiting javascript to a single page, you should pick one:
Method 1
Method 2
Method 3
Please, please, please do not try to load all your javascript on every single page.
Update (after your comment below):
I think you are confusing a few different things here.
First, even if you compile all your javascript into a single gzipped/uglified file, that still doesn't force you to use one knockout viewmodel for your entire application. That file can contain multiple viewmodels. They don't even need to know about each other.
Second, the way the rails pipeline works is by concatenating related or dependant javascript files together. It does this to reduce the number of requests the browser has to make to get the javascript it needs for each page. It doesn't necessarily mean all your javascript becomes one file. Just that the javascript for each page become one file. For more information, check out the Rails Asset Pipeline Documenation, it has a great explanation of how it works and how to use it properly.
Third, neither of these things mean you need to write all your javascript as if it were one file. In fact, this is a bad idea. You should seperate your javascript into relevant files by functionality. This allows them to be reusable, as well as eases development work.

Related

ASP.NET Core 2.0 bundle CDN

Before we could use bundles like:
bundles.Add(new ScriptBundle("~/bootstrapjs", "//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js").Include(
"~/lib/bootstrap/dist/js/bootstrap.js"));
How do I do this, for CDN paths now?
I know I can use gulp and so on, but I'm looking for at simple way to have a specific place to update all references to packages that I do not use on every page, like a calendar or a datepicker.
Before I had something like "#Scripts.Render("~/datepickerjs")" whenever I needed a datepicker, and I just updated the versionnumber in my bundleconfig.
I seems quiet like much work to update this every place I use it.
ASP.NET Core now uses the <environment> tag to differentiate when to load which scripts. This is actually far superior, as you can have many different variations for virtually any number of different environments, instead of just a simple boolean toggle of optimize or not.
If you want some of the similarity of being able to load a "bundle" of scripts, you can simply create a partial view that houses the scripts you want to include together as a set. Then, simply reference this partial where you need to drop them.

Grails 3 - achieving customization of template in a way it was possible with _form.gsp in version 2

I am relatively new to Grails and I am little disappointed with the way _form.gsp removed with field plugin in Grails 3. _form.gsp seemed to be good time saving option when we need to customize views with Bootsrap or materialize.
Now with grails 3, install-templates does not create _form.gsp. As per this documentation, we can achieve customization by creating _wrapper.gsp, _widget.gsp etc under view/_fields/default directory. But I am not able to find the example of such custom GSPs.
Also, let's say if I customize all the four GSPs (_wrapper.gsp, _widget.gsp, _displayWrapper.gsp, _displayWidget.gsp) will it generate actual code when we run generate-view command? I mean will it replace, f:all, f:table etc tag with actual code? If not then there is quite amount of work to do I guess. Because after we are confident about our domain class and tested all CRUD operation, we run generate-view command for creating all the domain specific GSPs. Then in most cases, we need to do some changes according to our requirement, like re-ordering the fields, hiding some of the fields
So in conclusion I have two goals:
Customizing default templates and start developing.
When I run generate-view, I do not want f:all, f:table etc abstract tags. I need actual fields in place so that I can customize generated views of domain.
If any one has achieved this, then please share the solution.
Grails 3 comes with the fields plugin by default. The templates used in Grails 2.x have been replaced in full. So, your goal 2. will be hard to achieve with Grails 3 it seems.
However, here is a helpful blog which explains how you can adjust some of the fields templates by replacing them in your project: http://blog.anorakgirl.co.uk/2016/01/what-the-f-is-ftable/
Similar to the description provided, you can place a modified _list.gsp template in folder in
/grails-app/views/templates/_fields/
Hope it helps.

ExtJS 3 Code Architecture : Best way to organize class files and load them dynamically

I'am modernizing a legacy web application, with its frontend based on ExtJS 3.x.
Currently, user interface depends on large file of several thousand lines, with too many nested anonymous functions, encapsulated in an global `Ext.onReady()̀ per file. It's ugly, unreadable and not maintenable.
To maintain code and modernize it, I want gradually refactorize it by :
using namespaces
exploding big files : one class per file (grid, store, form ...)
organizing class files in a good directory structure (app/module/grid|store|...)
loading dynamically class files, when required (maybe with Ext.Loader.load() ?)
optimizing loading by using minifier, as assetic, if possible (in a next step).
All these problematics seems natively solved in ExtJS 4, with its class Loader, its dependency system (require), its Application Singleton and its structure folder conventions...
In ExtJS 3, it seems more confused. So :
What are the best practices in extjs 3 to organize code "like" in extjs 4 ?
Do you have clear examples illustrating these problematics ?
Ext3 is an entirely different beast than 4. Code organization is really up to the developer. I personally would avoid dynamic loading in favor of minification of the entire app. This is what ext4 would give you in a production app. They really only intend dynamic loading for debugging purposes. I have gone the dynamic loading/module route before with Ext3 and it was a regret. It is OK with 4 with it built into the class system.
If you are using a later version of 3, do namespaces with Ext.define. It will do the Ext.ns for you internally and will make upgrading to 4 easier down the path.
You are correct that you shouldn't have big files or config objects, but don't go too overboard. Try to group things into logical classes. A grid can be part of class that contains other components that make sense as a view.
If you do want to upgrade to 4 later, I would recommend trying to emulate the structure a little at least with stores and views. 3 doesn't really impose any structure.
I would avoid dynamic loading with 3. See above.
Definitely minify. Not only will there be much less data going over the wire, but you get huge savings by removing all the overhead of a GET for each script. Gzip might help a little too.

Compiling Sass with custom variables per request under Rails 3.1

In a Rails 3.1 app, one controller needs to have all its views compile whatever Sass stylesheets they might need per request using a set of custom variables. Ideally, the compilation must happen via the asset pipeline so that content-based asset names (ones that include an MD5 hash of the content) are generated. It is important for the solution to use pure Sass capabilities as opposed to resorting to, for example, ERB processing of Sass stylesheets.
From the research I've done here and elsewhere, the following seems like a possible approach:
Set up variable access
Create some type of variable accessor bridge using custom Sass functions, e.g., as described by Konstantin Haase here (gist). This seems pretty easy to do.
Configure all variable access via a Sass partial, e.g., in _base.sass which is the Compass way. The partial can use the custom functions defined above. Also easy.
Capture all asset references
Decorate the asset_path method of the view object. I have this working well.
Resolve references using a custom subclass of Sprockets::Environment. This is also working well.
Force asset recompilation, regardless of file modification times
I have not found a good solution for this yet.
I've seen examples of kicking off Sass processing manually by instantiating a new Sass::Engine and passing custom data that will be available in Sass::Script::Functions::EvaluationContext. The problem with this approach is that I'd have to manage file naming and paths myself and I'd always run the risk of possible deviation from what Sprockets does.
I wasn't able to find any examples of forcing Sprockets processing on a per-request basis, regardless of file mod times, that also allows for custom variable passing.
I'd appreciate comments on the general approach as well as any specific pointers/suggestions on how to best handle (3).
Sim.
It is possible. Look here SASS: Set variable at compile time
I wrote a solution to address it, I'll post soon and push it here, in case you or someone else still need it.
SASS is designed to be pre-compiled to CSS. Having Sprockets do this for every request for a view on a per request basis is not going to perform very well. Every request is going to have to wait for the compilation to be done, and it is not fast (from a serving-pages point of view).
The MD5 generation is within Sprockets, so if you are changing custom variables you are going to have to force a compilation on every single request to make sure that changes are seen because the view is (probably) not going to know.
It sounds as though this is not really in the sweet-spot of the asset-pipeline, and you should look at doing something more optimised for truly dynamic CSS.
Sorry. :-)

Form development optimization

Like many web developers I do forms all the time. I found myself doing the same all the time: placing input fields, assigning a name to each, ajax the form, then create the php which involves to assign a $php var to each $_REQUEST['var'], escape and validate data, build the html and emailing the results...
So I find that 70% of the work I repetitive but I just can't duplicate a page and change the fields. I end up wasting more time reformatting, deleting and adding different fields than creating from scratch.
I started planing to program a "list of IDs to html+php" converter in which I'd input all the IDs and this would output the basic html and php. Then I thought: there's got to be thousands of developers that go through this, I'd be reinventing the wheel. So this is my question, I'm trying to find that wheel that somebody must have invented already.
I found this: http://www.trirand.com/blog/jqform/ which does more or less what I'm looking for but it's an expensive solution and it has too much functionality for what I'd be using it.
Which tools do you use to optimize repetitive task about html and php?
Creating forms using plain HTML is cumbersome and time consuming. The task will be much simpler if you use an open source form library. I use Zend_Forms extensively. You could also look into the one provided by EZ Components
These form libraries allow you to specify various form elements, validators for each element and data filters (string tags, lowercasing etc...). Once you have specified these the library automatically handles the rendering of forms and further if there are errors it will renders the errors as well. Usually these libraries render the forms with certain predefined mark-up (HTML) but it's configurable as well.
If you start using one of these libraries you would save a lot of time while creating forms. In-fact I would suggest you to use a framework such as Zend or Symfony for your projects.