I'm looking for a way to organise my js and css libraries in CakePHP 2.4.1, but I cannot seem to find the best way to do it.
In my layout.ctp is a section where all js and css libraries are included. However all libraries are loaded on every page while only some should be loaded per page.
I could define the required libraries in the corresponding controller, but I don't think this is a good MVC practice.
Hope to hear some good advice.
You can load scripts and css on demand directly in the view file.
That way, you will only load in your layout the scripts and/or css needed for your view.
As described here in the documentation : using blocks for scripts and css files
It depends on how much js / css you have. If it's not a huge amount, you should concatenate / minify all your js / css into a single file, and just include that on every page. I use Codekit for this. Mark Story's asset compress plugin is apparently also good, though I haven't used it.
Minified JS / CSS is pretty small.
Related
I'm working with jsps in my workplace. Pages were built using bootstrap2. Though new versions of bootstrap and other frameworks came out, I'm stuck with bootstrap2 as we have hundreds of pages using it.
How do I make the style configurable, in the sense, the configuration should give me the freedom to choose the framework, etc. So going forward I can choose what to be used for new pages
I can relate to your problem as this is the case with many "old" products in the market. They could be built with jQuery, plain js or other tools that considered "old" in today's market.
I assume you could not refactor your whole app as you are saying there hundreds of pages. Some options to consider and to set pros and cons for each with management and product teams.
First, you need to decide your technology you want to use and how.
You can use small bits of react/vue.js/other to inject into your existing pages
you can create full pages from newer technologies and slowly replace older pages in the app one by one
start a full rewrite of the app (hard to sell to management)
I did all three options in my projects but you need to decide with your own team.
Now I'll elaborate on what you can do for each of the options:
I use react so can't recommend other libraries, but this is what I used:
https://github.com/rstacruz/remount
You build react components and then you can use them as HTML snippets in your existing code.
You create another app in whatever new language you want and start building out exiting pages one by one. With each new page, you build you link the old app to them.
This is the easiest one to start but the longest one to achieve. But straightforward of what you need to do.
To make the styles configurable, you can add another stlye.css file underneath the bootstrap2 css file. In that style.css file(name it anything you want, can be bootstrap2_override.css) you can add any styles as well as override bootstrap2's framework styles.
The downside to this is that you are now adding another css file with more CSS just to override bootstrap2 styles.
I've been developing web app using react or angular but I'm confused why people would use library like react-bootstrap (https://react-bootstrap.github.io/introduction.html) or Angular-bootstrap? Because when I create I just have to load the css framework using link tag with its corresponding js lib, then in reactjs side, I just have to put the classes needed for a component. Isn't that sounds easier?
Thanks,
It has to do with the Javascript portion of Bootstrap. The CSS will work just fine with a link tag.
But React and Angular are Javascript libraries which have a lot under the hood for manipulating the DOM. If you also use something like Bootstrap or jQuery to manipulate the DOM, it probably won't play well with React or Angular since they're trying to do similar things in very different ways maybe at the same time. So DOM-related Javascript libraries need to be rewritten so they play nicely with React/Angular.
From the react-bootstrap docs:
we don't ship with any included css
All they deal with is the JS.
When you chose to work with reactjs you chose a library that updates your DOM in a cleaver and sophisticate way.
It has the virtual DOM and bunch of algorithms (like the Diffing algorithm) to determine when and how to update the DOM in the most fast and efficient and performant way.
When you combine this with another library that updates the DOM, you basically interrupt those algorithms to do their job.
Beside performance aspects, you are working against the pattern of react, you break the "component pattern".
React-Bootstrap is here to help you maintain your component pattern with their components. you just need to include the css and other resource files.
Their components doesn't do anything beside rendering HTML with proper class names that correspond to the classes that in the bootstrap's css files.
They do that in the same way all your other components do it, via props.
This way you can have a bootstrap components that play nice with your other components in a native way without breaking the pattern.
Yeah, it's easier to dump some css and js files and things just works, but it's harder to maintain, debug and scale.
I'm developing several AngularJS applications and I'm looking for best practices how I can share code, especially directives, between these projects. The biggest problem I'm facing is the following:
Most of my directives contain at least one js file and a html template. The js file often contains a reference to the template. When I include the same js file from two different projects, what's the best way to handle the different paths?
There may be better ways to handle this situation I can't even think of. So, I would like to know if someone has experiences with this situation and how this is handled. Thanks!
I find it helpful to use compiled HTML templates using a build tool like https://www.npmjs.com/package/grunt-angular-templates . There are plenty of Gulp/Grunt alternatives if that one doesn't suite your needs.
Then you will need to keep your templates in namespaced directories so that your consumer applications don't collide.
Then you when you just need to consume a single compiled JS file. The templates are compiled into it. If you need to override the templates in your applicatons, just use the template namespace convention to provide the overrides.
Maybe you can write your code in nodejs style (with CommonJS), locate your files in different folders and such, and then use browserify to combine your js code into one piece. HTML templates can be also easily transpilled into js files using angular template cache and some tool like this one for gulp or maybe some similiar for grunt.
Sorry this will obviously be a beginner question. I have Angular up and running fine within a Grails application. Now I have defined a directive that is effectively a control needed. This directive uses 'templateUrl' - that also works fine.
However, this is the simple part that I just don't know. Where would I put includes to javascript libraries that are only needed by the directive? That is, statements like:
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
I have put them in the main page for now, but that doesn't seem quite 'right'. These are dependencies of the directive, not of the page. From a maintenance perspective, if that directive were ever removed due to changes, how would anyone know to remove the other links?
Note: my directive is already in an open statement - if that matters.
This is a larger question of dependency management. There really are 3 routes for doing this:
Include it in the main index.html (like you did) and declare it as a dependency in your docs. Feel ugly? Sure. But it is how a lot of stuff is done.
Use requirejs http://requirejs.org It is a module loader, and so at least the code itself can explicitly declare its dependencies.
Use browserify http://browserify.org It is also a module loader, but following UMD/CommonJS, exactly like in node.
I started with #1, then #2 for a while, but recently shifted to #3. The files are cleaner, and using npm makes managing the dependencies far easier.
Loading all external resources inside index.html is the common approach (SPA load all its resources once), but its not a must.
Inorder to achieve your goal you need to use external tool, we use RequireJS (Browserify is good as well) this way you can control the sources you load into the page.
Checkout this:
RequireJS official site
Using RequireJS in Angular Applications
I was trying to achieve this using Webplate, but I decided that I need to force myself to learn bootstrap. I'm using a clean, empty dist and I want to emulate the effect that webplate framework offers by default
Responsive background image for the intro of a single page website.
The best example I found online is this http://creativedistrict.com/
I'm looking all over stack for examples but can't find any. If I can get some help, at least direction, I would appreciate it. I'm a novice, that's why I'm asking.
If you think of the Bootstrap framework as a bunch of CSS and optionally JS, then in theory it's not too difficult to combine with something like Webplate.
To add the CSS and JS files, you could download Bootstrap, grab the files you need, add them to your Webplate project files, and then link to them in the head of your Webplate document.
Alternatively, http://getbootstrap.com/getting-started/ has details on where to get CDN versions of these files so that may be simpler for you.
Once you have the Bootstrap CSS and JS linked into your Webplate page, you are good to go. If you check out the Bootstrap website you'll find plenty of code you can copy and paste.
When combining different frameworks like this, you need to use some caution because of CSS or potentially more serious JS conflicts. I did some quick tests using the Webplate download from http://getwebplate.com/#download and using the Bootstrap CDN links of
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
and
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
The CSS seemed to be fairly compatible, the JS might take a bit more work.
Good luck!