How can I use polymer as file:// based static sdk? - javascript

I have tried to build an app using polymer-cli, and let that package all the required files, but I am not sure if this is doing what I want, because the build code doesn't match the examples I have seen where you request and webcomponents-loader.js. My build doesn't make a webcomponents-loader.
I know it is possible to create an SDK, because the code works on sites like codepen and js fiddle.
I just want a drop-in solution to start creating components using polymer, and it must be able to work from file:// urls.
I have a custom application which gets all its content from file urls and has no webserver to speak of.
I have not seen any information or tutorials which meet my specification.

Related

an api for searching packages/libraries in unpkg like the cdnjsAPI?

pardon if it is a silly question, I am trying to make a Javascript code editor React app and I have come across the need to add external javascript libraries as dependencies to the editor(not for the app to run, but for the editor inside it). I found the cdnjs API https://api.cdnjs.com/ which would have been perfect except for the fact that certain libraries like ml5js are not to be found in here. However if there was some way I could search unpkg like this, I could add particular libraries according to the user's choice. So, is there some api like that which could return a json object containing the list of libraries with their unpkg cdns, matching the queries sent for the library names?
Or, is there any other way I could get search from a list of javascript libraries other than unpkg?
There is no official way to search for UNPKG packages but there is a third part website https://www.unpkgsearch.com/
You can search for packages and directly copy the unpkg link

How to serve 2 different versions of websites under the same domain?

I have started working on a project that needs a re-write. So, instead of doing a big bang release
we have decided to use Strangler Pattern which means the following
The current application (stack details below) will be running as is under the existing domain https://app.com
The existing (and new) features will be re-written in a new stack (details below) and deployed in parallel to the existing app (under the same domain https://app.com)
The requirements are
The end-user always works with the same domain https://app.com
Any existing feature migrated to a new app or a new feature is available by the under the same domain https://app.com
The stack and architecture of the current app is
HTML files with hardcoded data
CSS files
font files
PDFs
images
flash files
among other things.
Thee application is static. It has no database. It makes calls to other 3rd party APIs but does not have its own database (other than the files, and the images)
It sits under a directory and is served by running a web server (Apache) on a private dedicated server.
The stack and architecture of new re-write will
Use React or Gatsby
A standard build system that generates the static files
The data (PDF, Images) hosted somewhere else
Flash files (until we figure out a better way)
Given these requirements, I thought of having 2 versions of the app using some sort of load balancer such as Nginx and serve the URL patterns using a proxy.
For example
a request coming to https://app.com/productPage.html goes to existing app deployment (assuming it is not migrated)
a request coming to https://app.com/profilePage goes to existing app deployment (assuming it is migrated)
Now, considering this situation, I want to ask the following question
Is this approach looks sane? Are there better ways to deal with this situation?
How to implement such a reverse-proxy based system (considering Nginx)? (or if there is a better way)
I would love to hear out ideas and any resources/books/github that can help me learn and implement this.
Thanks a lot in advance!
I would recommend to create a v2 of pages that has been migrated to new functionality. And all links to the page should be updated to point to v2.
If anyone has done bookmark to old links, then those pages can simply redirect the user to the v2 ones by simply redirecting them using JS - window.location(url_of_target_page);

Ionic3 import external web hosted javascript library

I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)
I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it
First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.

How to use server-side rendering in Angular 2?

I have a web app developed with Angular 2 which communicates with Java APIs on the server to fetch data. Everything is working fine except the pages are not indexed by search engine (except Google which supports script generated tags).
I've googled a lot and found that this can be achieved by "server side rendering" and there are libraries available to achieve this but all of these are commercial products that require payment.
I have come across Angular Universal which is not a commercial product, can we use it to solve our issue? If it can then how can we hook it up to our existing app?
You are on the right path there are two ways to achieve your objective
If you are using #angular/cli for developing angular app then you can only follow this link
If you developing with your own webpack.config file then there are lot of options available, best of them is universal-starter , which is featued in official documentation of angular/universal
While continuing with #angular/cli, there is a little caveat that it doesn't support lazy loading yet but they are working on it and future is bright with #angular/cli. If you want to implement lazy loading now only then i will suggest you go ahead with second option.

Custom UI for Alfresco ECM

What are the options for implementing a custom UI for searching the alfresco repository?
I have found only customizations of the Web Scripts share which is more of a WCM thing. Could it be implemented and expanded for Custom Model searches from imported CMIS data?
Has anyone built a custom UI for communicating with the 5.0 or 5.1 alfresco repository?
Any help or search paths would be greatly appreciated.
It's up to you, really.
Latest versions of Alfresco have a nice and documented REST API, which you can consume. Additionally, web scripts you might create are also easily accessible with a simple HTTP request, so customizing is not a problem.
https://api-explorer.alfresco.com/api-explorer/
The latest thing is what Gagravarr already mentioned, Angural2 based components (which also speak with the above mentioned REST API).
Here is a blog post with almost the exact title as your question. The short answer is you can use whatever you want to build a custom app on top of Alfresco.
Yes, there are Angular2 components that will be available some day, but for now, they rely on REST API changes that have not been shipped in any stable release of Alfresco, including Community Edition. They require an early access release (201606-EA or higher) which you should not run in production.
So from whatever language you decide to use you'll be making REST calls. But to which API? There are many. Here is the order of preference you should use when selecting an API for Alfresco.
CMIS. Grab a library from Apache Chemistry.
Public REST API, see http://docs.alfresco.com/5.1/pra/1/topics/pra-welcome.html
Out-of-the-box web scripts marked "Public". See http://localhost:8080/alfresco/s/index for a list, then click down to an individual web script until you see its lifecycle.
Your own custom web scripts
Out-of-the-box web scripts with no lifecycle or something other than public.
That last one is truly a last resort. Don't do it without being fully aware that you are writing against an API that will change without warning.

Categories