first off : i am completely new to ember and haven’t created an app yet, so this may seem like a very silly question, please bare with me! I am trying to understand if I could create an app which displays dynamically generated content from a remote server. I read that it is possible to have some code running on a server which “connects” to the ember framework once the page reaches the client and so a communication between the two (server pages and ember app) is possible. The problem, however, is that the developer of that server is no longer reachable, there is way to access that code. The content, however, is quite relevant so I was wondering if it is possible to create an ember app which reads that remote and completely dynamic content and then displays it , say maybe with a fresher UI. think of it like a toolbar sitting on top of every page and the UI-modified content from the remote server under it. Unfortunately, no API’s to that content exist either, that would be easy.
I did something like that with a browser extension using JQuery and it works, however extensions don’t run on all mobile browser and that is a requirement now. Also, I am aware that I could do something server based myself and create a proxy, but I was wondering if there is a simpler client based way using ember maybe?
Hi @vim! Welcome to Ember and sorry it took a while to get a response. It was a holiday weekend so I for one have been out. Anyway I’m pretty sure Ember (or any other SPA framework like Angular, React, etc really) is exactly what you want here. The only thing you want to make sure is that you’ll be able to make AJAX requests to the remove server and all that entails (authentication, authorization, does it require any API keys, etc).
Here’s how an ember app typically works: you have a bunch of templates, javascript, 3rd party packages, etc, and when you “build” the ember app it smashes together all of those things into a few files including a generated index.html, a few javascript files which the index.html loads, a few css files which the index.html loads, image assets, etc. One thing to note about the whole “SPA” thing is that it is what it stands for, a single page application, Meaning that single index.html is the only actual html page that ever gets loaded/used. The rest happens dynamically at runtime using “routes”, but those are technically just javascript acting on the page and not additional html pages being loaded.
Then you can host those files pretty much anywhere (S3, your own server, even github pages). What happens after that (at a high level) looks something like this:
you request the client assets via your browser (let’s say it’s an S3 bucket with a domain configured for “foo.com”, the browser downloads the index.html, and all the linked script files, standard stuff
when the app’s javascript file is loaded, Ember “boots” and initializes the application. It loads the application route and any initialization code you specify like authentication/authorization etc.
your ember code makes data requests through the “store” service, and those requests are translated (using Ember Data adapters) to AJAX requests which load the data from your remote server, normalize them in the serializer layer, and cache them locally. NOTE: this assumes you use Ember Data, if not you can just use regular custom AJAX requests
you can also create records on the front-end and “save” them which persists them to the server (again, via Ember Data)
as I mentioned before, “pages” are called “routes” and while you might have a URL that looks like “foo.com/bar” what that really translates to is "foo.com/index.html#/bar (that’s an oversimplification but basically how it works). So anyway you change “routes” instead of pages and that can change what data you fetch, UI you display, etc. Essentially the analog of changing actual “pages” on a server rendered or static html site.
Ember is a great framework and there is a TON of stuff that it provides out of the box and a very rich ecosystem of plugins called “addons” which can help you with anything from authentication to data fetching to rendering maps to internationalization to… well basically sky’s the limit. I would definitely recommend working through the guides to get started and if you have any questions feel free to ask here or in the discord community. And good luck!