I am learning Angular and I need advice on best practice, and a general direction for digging deeper in the subject:
I am trying to create a web app with Angular which is composed of a number of standalone widgets, and I decided to implemented them each as independent custom directives.
I would like to make these custom directives as reusable, movable, replaceable and cohesive as possible, and put all of their related html/css/js files in their own dedicated folders, with a folder structure of something like this:
What is the best practice for loading a separate CSS file for the template partial of a custom directive? (For example, should I load the CSS from the partial.html which will eventually appear in the html body? Should I look into merging my css files with Grunt upon build?)
You should build all of your CSS into a single file you. Without merging you require an additional request to the server and processing of the CSS which adds more time before the page can be rendered.
For additional loading performance you can combine all of your HTML fragments into a single file as well that you load up front.
<script type="text/ng-template" id="temp2.html">
<div class="view">
</div>
</script>
Related
I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates.
Is it bad style to overload elements.html with CSS and JS imports?
No, there is nothing wrong about including JS and CSS files in the elements.html.
Think of elements.html as a non-ui web-component.
There is just one important thing to remember:
Polymer team has created a tool called Vulcanize which takes a file like elements.html which imports all the custom elements, to knit them together into a single file for reducing the number http requests the browser makes to gather the required resources. Adding JS and CSS files here will get this tool confused and generated rather odd results.
So this is exactly why you don't see official examples and tutorials include JS and CSS files in the elements.html.
More about Vulcanize:
https://github.com/Polymer/vulcanize
https://www.polymer-project.org/0.5/articles/concatenating-web-components.html
Hope my writing is clear.
I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.
In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.
Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?
P.S. It should be noted that I am not looking for cache-related solutions.
you can use grunt-angularjs-template
it does concatenates all templates in one file. as per its docs
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache
If you’re using gulp then a good option would be gulp-angular-embed-templates
I'm using rails to assist me in creating a static website. I have one controller pages. It has 4 action-view pairs: home, team, work, and contact.
Rails has created pages.css.scss for me, but there are elements in each of these pages that have the same name (i.e. class="container" or class="wrapper"), but have varying properties throughout the different pages.
What is the best practice for creating SASS stylesheets that are only applied to specific pages.
One method that I've read of is to use content_for, in which I create stylesheets for each of these pages, and use content_for to include them in the header of each individual page. Are there any negatives associated with this? The only thing I can think of is the fact that I have to tell rails to precompile every one of the page-specific .scss files, which is tedious.
You need content_for and need to restrict loading all tree directory to only those files which are common all over your app.
you can just put the <style></style> directly on the view file
I'm working on a large web project that involves many developers, and I would like to slim down a package of Bootstrap3 and keep only what we're using. Basically, the idea is to cut out any extra overhead when the page loads in the browser.
So there are 2 ways I can go about doing this:
I can either...
a.) remove any extra parts from the library, create a new build, and then load that into our project.
For example:
<!-- Custom build of a slimmed down Bootstrap -->
<script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Or...
b.) modularize the entire Bootstrap3, separate each component into its own file, and write the entire build into the html, while commenting out the things we don't need.
For example:
<!-- All Bootstrap components-->
<script src="/bootstrap/3.0.3/js/glyphicons_bootstrap.min.js"></script>
<script src="/bootstrap/3.0.3/js/buttongroups.min.js"></script>
<script src="/bootstrap/3.0.3/js/inputgroups_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/navs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/navbars_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/breadcrumbs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/pagination_bootstrap.min.js"></script>
etc...
The advantage of using the second option would be that it would give the other developers more control of the bootstrap components that we're loading into the project, without having to go and rebuild it again. If in any event in the future they need to load some new Bootstrap components, they can just uncomment that line of code. That would make this more flexible for other developers to use, and it wouldn't restrain them from developing further throughout the project using Bootstrap.
What are some thoughts about this however? Would pulling more files into the project (as opposed to pulling in one large file) increase the overhead at loading time? Is this against "good/best practice"?
If you go to the https://github.com/twbs/bootstrap/tree/master/js all the js is separated out in the js folder. The dist folder has the compiled files.
However, one file is less http requests and faster loading. The bootstrap.min.js file is small. Plus once it's cached by the browser you don't need to worry about loading.
Fewer files, faster loading because there are fewer http requests. And for that matter, you can use Bootstrap's CDN for their js and their respond.js.
It's the CSS that needs slimming down if you don't use certain components. I never use their navbar (two levels only), modal (no images, iframes etc), and other things, so I don't use those things. I use the buttons, grid, panels, and other stuff. I use LESS and CodeKit. Just // comment out the components you are not using and recompile. that's where you'll see the biggest gains in slimming it down.
In bootstrap.less if you do this:
//#import "bootstrap/popovers.less";
//#import "bootstrap/component-animations.less";
Then all the resulting CSS won't be part of the final bootstrap.css file
The first way is better to use in production,
the second is better when you develop your site
Below you can find a good list of minification tools for you, that help you to combine js files automatically.
Is there a good JavaScript minifier?
In the first place not loading what you don't use will always the best option. As mentioned by #cab in general reduce http(s) requests should give faster loading.
Bootstrap has a modular structure and the idea behind is you only have to load (or compile) what you need. Compiling your own copy of bootstrap will be relative easy. The result will be one javascript file and one css, both containing the components you need.
Bootstrap's customizer (http://getbootstrap.com/customize/) will be the easiest way to compile your own copy, you can select the component Javascript / CSS you will need, and download your copy.
Second option is to download the source from github and compile this. I use grunt mostly to do this Bootstrap refers to http://bower.io/ to do this. Before compiling comment out what you don't need. For CSS you can do this in less/bootstrap.less and for javascript in Gruntfile.js (around line 73).
I am learning Symfony2, and I am making small tests.
Well I have made a small html for to test the twig templates.
<html>
<head>
<title>test00</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test">
<img src="test.png" /><br />
test
</div>
</body>
And the files are in the same directory of html.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default
And rename the html to html.twig.
But fail when use this html as twig template, because the Symphony try to use "http://localhost/Symfony/web/test.png" as link the image.
And yes, I have read the documentation and know the "asset" and I can change the path to the files with some example
test.png')" /> and also copy all files to the web directory in the budle.
But I wonder "Is there any tool to convert html to twig?" because for example I can't say to my boss:
"The Symfony2 is great. But your designer must to learn Twig and when she finish the html with dreamweaver, she must change all of links to css and images for to make a template...and yes she can't see anything only can send to me to put in the web server to check if it is correct."
What do you hope that my boss will think about Symfony2? He will think this is crazy, this is twice of work.
I think the best it is a automatic tool to translate a html with relative paths to twig and something like that a package files to put in web dir. And the designer does'nt need to know anything only make pretty htmls with few weird things as put {{page_name}} instead the "Page name".
Regards.
From an html coders perspective, Twig is HTML. As long as templating language support is setup on your server, there is no difference between writing twig or HTML. The only difference would be the <h1>{{variables}}<\h1>. Your HTML coders should be aware of what variables they have access to. That being said, from a developers perspective, twig is a lot more so I'm not simplifying twig. But if someone knows HTML, they'll know what to do with twig.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default And rename the html to html.twig.
Nope. Your html.twig files need to end up somewhere under views so the template processor can get to them. However, your css and images need to be copied to your root web directory. Same place where app.php lives.
But fail when use this html as twig template, because the Symphony try to use
"http://localhost/Symfony/web/test.png" as link the image.
It's is not symfony generating this link but your web browser. Use Control-U to examine the generated html source from within your browser. You will find that your links such as href="test.css" have not been changed. Twig will not change anything unless it has has some curly brackets around it.
So your designer can continue to use her current workflow and deliver a set of files. You just need to deploy the files to the correct locations.
Of course symfony/twig can do a lot more that simple variable replacements so eventually you might want to change things. But you can get started just fine.