We are planning on serving our custom polymer elements from our production Akamai CDN which supports http/2.
We won't have more than 40 components overall and we aren't writing apps. These elements get served from static HTML pages produced by a cms.
We don't want to use bower/vulcanize.
Can we do this without getting burned?
I don't see any problem in it. All you have to do is give CDN's address in the link tag. Indeed you can use base tag to define the common path and then define relative path in your link tag. The only thing you have to keep in mind is that either you'll have to move Polymer or any third party component also to your CDN(including polymer.html and webcomponents-lite) or you'll have to use something like polygit for Polymer components.
Related
I am aware it is possible to reference images stored in s3 via the src property, But what if I want to load something more complex, like a section of static html. Are there any ways to go about simply pulling html down for use/insertion into the DOM (similar to a rest call, I suppose)?
I would imagine the css would be inline in this scenario, but that would be the next challenge to face.
(for reference, I'm in an angular framework attempting to implement a section of a page that would be rendered via code stored in s3, so it would be easy enough to update it without deploying the codebase)
A possible solution is to have an API that will return a JSON file of format (just a rough assumption):
{htmlCodeAlongWithStyle:'Code in string'}
Here we are not creating a separate style sheet instead using style property of individual HTML components.
Now to embed code just create a div tag and set the innerHTML to the value of htmlCodeAlongWithStyle property of json.
Example:
<div [innerHTML]='variableStoringAPIResponse.htmlCodeAlongWithStyle'></div>
I would strongly encourage you to see if CDNs fit your use case:
Powering server-side rendering by offloading static assets to CDN for Angular apps
Since you're using Amazon S3, I would encourage you to look at Amazon Cloudfront. But you have many other options - including simply serving static content directly from your S3 instance.
I would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
I would like to use a font in an iframe which I know will be loaded already in the parent html page: can the iframe css simply refer to it as if the user has it already? or will I have to load it again via #font-face?
A more general approach complementary to #Mr Lister s comment:
An inline frame (<iframe>) loads another HTML document within your HTML document and embeds it. Simplified you could say it is a website within a website.
The embedded CSS does not interfere with its parents CSS or the other way around since they belong to separate documents and only live within them. As #Mr Lister already pointed out, resources that are referenced in both documents will not be loaded twice.
Any changes to the appearance should be made in the child document itself rather than after loading it in an iframe. You could, however, use JavaScript and its libraries to inject basically anything (stylesheets etc.) into the loaded document. For security reasons browsers generally only allow this for iframes that have to the same domain as the parent. Check out this thread to learn more about injecting via JavaScript: Override body style for content in an iframe.
CSS does not cascade into documents loaded into iframes, they are separate documents.
You will need to include #font-face in the stylesheet loaded into that document.
The file shouldn't be downloaded again, but loaded from the browser's local cache (assuming the server hosting the font has a reasonable configuration).
I'm newly started from the angularJs web application using html. I want to know about the difference between ng-include and ngroute in angularjs and also when should i use of them. If anybody can know this please give me an example to learn it.
Thanks and regards,
Parthi
ng-include just dumps the included html into the DOM.
ng-route has lots of different capabilities, including route parameters.
You can see that the URL changes when you go to different routes.
Primarily routes are used for having a single page app. Different pages of the app are routed into the ng-view. You can then go to these pages by URL since the router will automatically resolve these routes to the right view.
ng-include is called a directive in angular, its a core concept in Angular. It lets you include partial html files in your page.
ng-route is an extra component you can add to your angular application that allows you to work with the routing of URL and data. In order to use it you need to reference it as a dependency.
angular.module("app", ["ngRoute"]);
The differences:
one is a extension of angular with routing capability the other one
is a built-in directive that lets you include markup on your page
from another location.
ng-include is used on the markup <div data-ng-include="..."></div>
ng-route is used and reference in your JavaScript files.
If the CSS files for your site are referenced in the parent page, obviously you can use those CSS rules and classes in the sub-page or "included" page (like a jsp include or a php include). That will run as expected in the browser. BUT, if you are using an IDE or smart text editor of some kind (I'm using Netbeans), you will get warnings about the CSS elements in the sub-page (a .jspf for example) unless that file has a redundant reference to the css files. Is there a work-around for this? I don't want to have to reference the CSS files in both my jsp and my jspf (jsp include).
One technique I've used is to abandon jspf files in favour of a templating system where if you want to include something from a template, the template is actually a full page of which part is marked to be included. I actually use a home-grown template system for this, but my understanding is that thymeleaf (http://www.thymeleaf.org/) offers the same feature.