Simple question but can I build a single page form using polymer that can be launched, through a CTA button, from a non polymer website?
I need this form to store the values in json format, and then populate a data table within my polymer web app by parsing that json data.
So once I've got my polymer form page built, I'm going to wrap it inside of this CTA button that launches the page when clicked. This CTA needs to be distributed on multiple clients sites, so "third party" sites that I have no control over.
how could I bake in polymers required imports, so that it can run on their website?
You can have all the necessary imports inlcuding Polymer inside your form element. But there are two files that you'll have to import in your CTA button
Your form element
Polyfill webcomponent-lite
There are two ways in which you can achieve having all Polymer files accessible to you in your element
You can use cdn to call to files like polymer.html
Better method will be to vulcanize all the required files including your element into one file (or two one for html and one for js if you use crisper also) so that there is no load on client side to fetch resources.
Webcomponent-lite.min.js you'll have to keep outside of your vulcanized file.
So, so far you'll have to export a package of 3-4(CTA button, webcomponents-lite, your vulcanized element) files minimum to your client.
This should do the trick.
Related
I know that internal links in a React single page application need to use the React router navigate function instead of normal hyperlinks, or they'll cause the entire application to reload from scratch. And the idiomatic solution to this is the <Link> component.
However, I have to pass internal links as strings to a third-party library function. It allows HTML tags in the string data, like <a>. But I can't pass React JSX snippets directly.
(The specific use case is adding hyperlinks inside a Google Charts type=Table visualization. The react-google-charts wrapper has an example but it only works for outbound links, not to navigate inside the app.)
My research has revealed that one of the following general ideas might work, but given the finickiness of React when it comes to non-idiomatic solutions, I want an expert option:
Use a React <Link> component and render it to an HTML string before handoff to the non-React code.
Generate <a href="Internal/SPA/page" onclick="spaLink"> links and export a function spaLink(eventdata), doing some hack with global/window data to find the router navigate function.
Generate <a href="Internal/SPA/page" class="spaLink"> links and inside a React component, programmatically wire up a click handler that selectively intercepts events coming from that class.
Other approaches that solve the problem of invoking SPA navigation from HTML are welcome. Frame challenges that I should switch to a different visualization library that allows arbitrary JSX snippets in arbitrary places, are not. This tail does not wag the dog of chart library selection.
I have a service which is called after events which trigger page content changes. This service currently inspects all the viewable HTML on the rendered page for key words and then creates links to a glossary where those key words are used. The page content comes from many sources, including various components and external textual data. Initially this was done by finding all the elements and then searching and modifying the nativeElement.innerHTML which works fine on events that trigger a complete page refresh; in components where the text is based on template bindings, those bindings won't update after the innerHTML changes. I know modifying the innerHTML is bad...
I've tried using the root ViewContainerRef, and ViewRef as starting points but don't see way to access all the page content including content in multi-level child components. Additionally some of the content is added via router-outlet. I was hoping to either dynamically modify the templates, or the rendered content while allowing the component to still render the content when data changes and my service to post process again. Some components are from imported libraries, or receive their data directly, so modifying the component source code doesn't seem like the best option.
I found that by temporarily disabling, forcing change detection, then enabling the component on a data change, it would cause the component to be removed and recreated with working bindings. This is not an optimal solution, but did work as an initial fix. I'll attempt to try the above solution.
Using a MutationObserver you can subscribe to changes of text in the document, then you can manipulate the DOM in a way that doesn't break Angular, i.e. don't change the innerHTML of a node, but rather, insert a sibling with the new HTML and hide (don't remove) the original node.
I've written a stackblitz that demonstrates this.
https://stackblitz.com/edit/angular-highlighter2
EDIT I created an Angular library with all the code, see https://www.npmjs.com/package/ngx-html-highlighter
I haven't touched React in over 2 years, and a bit confused looking back at my old code. For example, if I were to build an instagram clone, would I utilize html templates and inject javascript as such as
<div id="reactEntry">
Loading ...
</div>
for the login page, profile page, etc.
and use react components for main logic? for example, dynamically rendering posts and comments?
Or would it be smarter to make everything a react component-- login page, profile page, etc.
would it be smarter to make everything a react component-- login page, profile page, etc. - yes. As you don't need to rely much on other libraries and can use routing between pages. Also, there is performance benefit for a fully react app.
Having other components along with react component would not cause any harm as long as you don't dom manipulate the react component.
Or would it be smarter to make everything a react component-- login
page, profile page, etc.
There are benefits of using react components over the traditional multi-page web apps.
Since most react apps are Single Page Applications(SPA), hence they are fetched once, and then virtual dom handles the rendering of various components. This is faster than the tree-based document rendering.
Components are re-usable. Say you need a Document upload form - consisting of a drag and drop file field and an upload button. You could simply create a component, and keep using it at multiple places. All components have their internal logic, which makes it easier to manipulate and define them. Such an approach ensures a consistent app look and facilitates codebase maintenance and growth.
Plugins like react-router can handle page transitions, by using its navigational components. You could do partial renders too, giving you a faster UI/UX experience than rendering the entire pages.
Django shows you forms when you do basic coding, right?
Where is the html of the automatically generated form in windows?
So instead of looking for a template folder, once the developer writes the url or views code, he finds the location of the skeleton-only html that Django shows.
In my opinion, it looks like it's built somewhere like an "anaconda/envs" contains a separate virtual environment, but I can't find it.
it's maybe path?
It's well documented:
https://docs.djangoproject.com/en/2.2/ref/forms/renderers/
It loads templates first from the built-in form templates directory in
django/forms/templates
unless you have 3rd party libraries included that override these templates.
However, a quick check in https://github.com/django/django/tree/master/django/forms/templates/django/forms/ shows that this directory is empty.
tl;dr
Django does not render any forms from scratch (unless it's the Admin which of course creates its whole UI automatically). It just enables you to quickly create a template that can render your form but you will still have to provide a basic template (aka HTML markup with dynamic parts) yourself.
I'm building a single page application using AngularJS. I want it to have a master detail appearance. Where there is a list on the side and a main view on the rest of the page showing the information for that list element.
I was wondering whether the correct way to approach this would be to use ng-route? Using ng-route I presume that I would have a url such as '/:elem' and a template url which then would display the information for that element using routeParams.
I'm having a bit of trouble just working out how all the server calls work. I have separate services for the API and the UI. So are the server calls like this:
The user navigates to my webpage and all the .html files are returned, including the template html files, but with no data apart from just the list of elements.
When the user clicks one of the elements, then another call is done to the server to retrieve the data for that element.
Thank you.