DSpace 2015 DSpace UI Prototype Challenge, 2 Feb 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: 2015 DSpace UI Prototype Challenge entry #4 - Art Lowel (@mire)

Description

Demo / screencast of entry #4 (REST + Ember.js) of the 2015 DSpace UI Prototype Challlenge, presented by Art Lowel (@Mire). NOTE: In the public presentation of this prototype, the audio failed to record. Therefore, we asked Art to record this screencast which provides a basic demo of the work.

https://wiki.duraspace.org/display/DSPACE/DSpace+UI+Prototype+Challenge

A

Hi, I'm art lowell from admire. I've made a few contributions, 2d space in the best, most notably the mirage one and two teams, and I'm here to present my prototype for a new dspace. You I based on ember, and it's called December I've, given this presentation life once before, but something went wrong with the recording so now I'm redoing it as a screencast I will try to answer most of the questions. I got during the live session. At the end of this presentation,.

A

So the technologies are used for my prototype are amber, Jay s, ember CLI and the whole thing runs on a vanilla, dspace, 5 rest. Api ember.js is a framework for creating web applications in JavaScript and ember. Cli is a command-line tool that helps you build and structure those applications. You can compare it to the rail, stool or yeoman if you're familiar with that.

A

So the guidelines for this task were not to spend over 80 hours, I spent between 70 and 80. It was to use either REST, API or display or D spaces java api. We use the rest api. The team wasn't supposed to be fancy. It was supposed to use bootstrap and emulates mirage too.

A

So we used the vanilla bootstrap with a few CSS tweaks to make it look like mirage to the code was supposed to be developer, friendly, well, I believe it is well structured, although there's always room for improvement, of course, but we followed embers guidelines for structuring your coat and we use jazz, hints, validation and the whole thing validates all code was supposed to be publicly available, while it is on github and there's a demo on December at meijer, calm, the documentation is also available on github spread between the readme and the wiki.

A

We didn't have to mock up any missing features because we were able to implement everything in scope. So let's have a quick rundown of what the prototype it looks like I'll go to the browser, so this is the homepage, and you see it has a header footer sidebar. The whole thing is response, responsive in the same way that Mirage do with response. If we use the same HTML structure for it, so the sidebar works the same way in all screen sizes.

A

So if you go to the tablet kind of size, you see it's just not just things to the sides. Let's maximize that again, let's take a look, of course on the homepage. You have a new section that is basically hard-coded in here, because the rest api doesn't provide new. So this is simply a template containing this content and there's a list of the top level communities. So let's go to one of those communities.

A

Well, the only one of course here you see logo introductory text, news, copyright texts, the same things you would see on a regular XML or jst. You I, you get an overview of the communities. If this community had any sub-communities you'd see them here, but this one only has collections. So let's take a look at what are those collections? It has the the same thing. You have a logo introductory text, copyright text news.

A

The difference is here: you have a browse tab where you can see the items in the collection also notice on the sidebar there's a context-sensitive box that only shows up on collection pages that basically just mimics the tabs in this case, simply to show off that it is possible to add context, sensitive side bar menus in here I. Just before the demo I lowered the page size 23, so you could be able to see that pagination works, usually by default, it's set at them and it's configurable.

A

Of course the item page was modeled after the simple item page in raaz to you have thumbnails a thumbnail. If you click it, you download whatever it is a thumbnail off, have a list of files here, some metadata collections, the items in and I'll link to the full item records foo item record is also my left in Mirage. To is simply a list of all the metadata fields in there and a list of all the files.

A

Again, you can download these files, they have thumbnails if they're available- and you have the item appears and following collections here so that about concludes the public section. I think I can just highlight it. Of course the trail here works. These things are clickable and also we're using the the history API. So you or else we'll just look like URLs on a static side, but they're updated dynamically by JavaScript. This doesn't mean that you can just use your browser's history like a regular site.

A

So let's try. Let's go back to that item here and let's try to edit it.

A

Of course, that means I have to log in first and luckily, the module I used to enable authentication member allows you to marker out as authenticated as needing authentication, and it allows you to login and return the red routes. No problems here. You see also another context, sensitive side bar and now we're logged in. We can also submit a new item, but let's look at the the edit page first, it has also again modelled on XML uiview for editing items the admin view.

A

So let's try that here, let's make that gutter rim and if we update now and go back to the view, I didn't think I had any unsaved changes left I might be mistaken. Yeah, okay, see the other is changed to Catherine, there's also an edit page for the bit streams in the item, which has checkboxes to remove bitstreams the same way it works currently and an edit page for every bit stream. Let's go to one of those, and here you can, for example, like replace the file.

A

Let's do that, let's see maybe I can find a document here somewhere. I can use I believe I used to have a good test file. No well, let's just use this standard apple thing, it's a sort of manual that explains how stacks work in Apple. So let's call that about stacks top PDF and save it okay. Now, if we go back to the parent item that that's not working as it should that it didn't detect it I already saved it, then it's a bug. I need to look at.

A

Ok, so now has been replaced by about stacks of PDF inside. If I download it and open it, it should be a PDF. I just upload it, and it is.

A

So one thing left to show you is the submission. The submission is modeled on the Edit item, page with the exception that you also need to specify a collection. I did add some simple validation, just to try it out and see how hard it was to do turns out. It wasn't hard at all, and here I thought. I detected. An item needs at least a title and an author. So let's add some author. Well, some author will do there we go and if we click it now, it should only complain about the title.

A

Indeed it does so, let's add a title, a.

A

A

Okay, so now we have the fields here you can still edit them. Let's start another test item here and submit, and then it was returned to the server and added to the gutter, ID and attitude item page and we can see it went back and forth to the server because it got some extra metadata fields that I didn't fill in like dat accession data available and stuff like that.

A

So that concludes the first part of the demo about the scope of the prototype. Let's get back to the presentation so how's this project structured while I split it up into two parts, December core: it contains mostly codes and it's specified as an Amber add-on, and that's that's basically a module. It's not an application that can run on its own. It needs to be part of a separate application and import it into it and importing it. We have a basic alee, an empty application called december and all it does is import the december core atom.

A

Now the reason for doing this is because, if you as a as a user, want to install this UI and make a few customizations to it, you can keep all your customizations in the empty app and import the rest of the code directly from from the add-on. So that means, if you later have to upgrade, is very clear which code you have customized and which girl you haven't and everything you haven't touched can be upgraded automatically and only the things you have touched need to be tweet again.

A

So that was very important for us and we try to keep that in mind while valuing the prototype, so anything in the December core atom can be overwritten in the app by simply placing a file with the same name in the same relative location.

A

So if you put put a file there, it will replace it, but you can still reference the december core file by explicitly prefixing it with december core / entire at, and that way you can subclass the original file or reopen it.

A

Reopening means that if you, if you reopen a class and your ad, like a method towards all instances of that class, will automatically have that method, whereas a subclass, you have a separate type of object that doesn't transfer to all other instances, so this add-on system is very powerful and I believe that the optional dspace features that were like mentioned on the wiki, like the embargo example, should be implemented as add-ons, because if you implements the embargo functionality as an add-on, you can in the December app you can import first December core, then on top of that import, the embargo, Adam and finally, your local customizations will be overriding at the top, so we can override both the core and the add-on, if you'd, like so I, believe based themes like kubrick or niraj, for example, should be implemented as add-ons as well again.

A

For the same reason, you can have a base version that works for everybody and the end user can make customizations that only work for their local repository amber add-ons are basically node modules, so they just when they're finished you package them and deploy them to the NPM repository and they can be downloaded by anyone who has note installed on their machine amber also ember CLI also has a helper for installing these modules you just type amber, install and the name of the atom at the root of your project, and it will be installed and get the basic configuration automatically.

A

So let's do a little demo of how you can customize things in this platform. Well, let's not do that at the moment.

A

Let's take a look at IntelliJ, so but first, let's take a look at the simple item record. Maybe for an island has a little bit more metadata.

A

This test web page, once again, let's take a look at this metadata. It has some subject. So, let's add subjects to the simple item page as one of these little sections here. How does that look? Well if we go to IntelliJ and take a look at the simple item, page templates, the it's this thing here: it's a handlebar stem plates.

A

Well, actually it's a variant of handlebars called HTML bars, but for all intents and purposes is exactly the same, and some of you may know handlebars as we already use it in raaz tool to render a discovery, discoveries user interface.

A

So it's basically just HTML than with these double curly braces dynamic things thrown in so this is HTML defines how things split up in rows and columns according to the bootstrap grid, and then we have these things here and there called components. Now you should think of a component as basically a little more complex, HTML tag like a select. A component has its own, its own structure and its own behavior. You can attach to, and it doesn't know anything about the outside world that you don't pass into it.

A

So in this case, we have a file section and we pass into it a variable called bit streams that we get through the model called originals. So it basically means the model. Is the item and originals is everything in the original bundle? Same thing goes for like this date section. It needs metadata, of course, and it gets its metadata from the item, which is the model, so we'll need to add a section like this.

A

Let's hear if we take a look at the browser once again, we want to put the section between you or I and collections here we want to put a subject section: okay, so let's duplicate this and let's call it a subject section.

A

It is also based on metadata. So it will also need to get past the models metadata. So if we save it now, a nice feature of ember CLI is that if you save a file, it automatically detects it and it will automatically refresh your browser, but now, of course, there's a problem because we specify the subject component, but we haven't created a subjective point.

A

So if we look at the dev tools will see an error that says a helper named subject: section can not be found, so let's create that and we can do that using the ember, CLI command line tools and we want to generate oh.

A

No I spoke too soon, I'm I'm, editing the the December core, a simple item page and, of course, as I explained earlier. We want to keep our customizations separate. So let's not do that. Let's make a copy of this in the app. As you can see, the app here is nearly empty. It contains some styles and an empty templates directory. That's all that's in there. The app Jas is is just the standard. There. Nothing was modified there. It only can it's basically an empty app. That does absolutely nothing but import December core.

A

So instead of editing this in the source version will want to overwrite this in app. So let's generate templates.

A

Called items item simple: that's the the same relative location. This thing is in was closed this. So, if you look here, it's called templates items items simple, so this generator will create that ill app for us.

A

And if IntelliJ will refresh, then we can see it here now, of course by the focus is going to be empty and if we save it now, we should be able to see that this page is empty as well. Let's close this for a second, so it only has a title, and now, if we put something in here, let's put like an h1 and save it again, that bingo should appear here.

A

And eat it does so to override it. We want to take the contents of this template and paste it in here.

A

Save it again, and then we should have our regular item page once more.

A

There we go so now back to what I was going to do at the subject section.

A

And again verify that it breaks.

A

And eat it does let's close this for a second okay. So now, let's generate that subject component, this is basically the name or the pot to the component. So let's just copy this and say amber g4 generates components with that name and it will generate an empty subject section component for us. If we refresh this again, it should be here a subject: section default amber component doesn't do anything.

A

So now we should see is the patron to work again, but it shouldn't show anything because it doesn't do anything yet for the subject I mean, and indeed it does, the page works, and there is no subject section now. Our subject section looks a lot like the other sections. All these things have a title and then some metadata, so I made an abstract section component that all these things can inherit from with a few default settings that can be already.

A

So if you take a look at this author section, for example, this is again in the in the defaults in the December core project. You see it inherits from a field value section component, that's that's the abstract thing and it extends that and at over the heads, the class names in the fields. So this is a good start for our subject sections so that just copy that and paste it here.

A

So what are we seeing? The head is using internationalisation and it's basically saying it's. This is the internationalisation key and it gets that from the internationalization service. We won't get too far into that. So from now for our subject, I'll just put a string here.

A

So what are we're seeing again, these cloths names? This is not strictly necessary because we won't be doing any specific CSS, but it is good practice to add a CSS class that you can easily use. If you want to change something about it. So less at that, and of course we don't want multiple metadata fields. We just want DC subject in here, not contribute your subject, bc subjects. Okay. So now, if we take a look at the item page, it should look okay.

A

So we have a subject that shows the subjects cap and calico, and if we go here, those should be the subject fields. There you go now. This field values section poland. If we take a look at it,.

A

Feels value section here it is basically it has these fields as well. They had the class names. The fields should all be here and some other properties. So what you do when you extend? It is basically you inherit all these properties. You can overwrite the select view you want and there's a few things that are interesting. Maybe we want to put our values on separate lines. Then we can add this to the subject section here and change that into true, and that should render our subjects on separate lines and don't do the semicolon separating thing.

A

So, let's take a look at how that works in practice. If we look at the handlebars templates or that abstract component here, we'll see that basically it starts with testing. Is there a value if there, if there isn't a value which shouldn't need to render anything? If there is it's going to render another, even abstract component, even higher up the chain? It's just a simple item view section that doesn't have to do anything on metadata. It is just something that says: I have a head and I have some classes and I have a body.

A

That's basically it so if that value is on separate lines is true, so anything you define here in your component, you can extract access directly in your template, so it's just checking. If that is true, it will put everything in a diff. Otherwise it will use the values as string property and a values. A string, of course, isn't defined on the subject section itself, it's defined in the parent class here, and it basically just takes the values and joins them with a separator.

A

So we could put this to false again or remove it, because then it will be false by defaults and add that separator here and turn that into something else like I, don't know, let's, let's make it a dash or let's make it a comma, and then this should be all go back to one line and be separated with a comma. There.

A

That's a bit of a demo of how you could customize your local copy of this prototype. Let's go back to the presentation.

A

So now why should we choose a JavaScript API? What are the advantages over the current current you eyes? Well, one of them is performance. These client side, job at JavaScript, apps, are very fast. Admittedly, the first page load can be a little slower because it has to download all possible templates and messages etc. Now, in this case, it's not that much slower if you take a look, let's, let's open this, so I have my cache disabled, because this is my development browsers.

A

So it's not that slow to load for the first time and once you visit something and needs to load for a bit. Let's go up to three here now. If we go back it loads immediately, because everything is already in memory, so it is a lot faster than the client-server model, because all it needs to send is the JSON data and when a dollar it hasn't JSON there, it doesn't need to do anything to render it again. That's why?

A

If you go to a simple item view and afterwards, the full item view it goes immediately, because this is already all of this is already at the client side and in memory so they're very fast.

A

It is also more coherence if you design your entire UI in JavaScript, because, as you know, javascript is a necessity for most complex behavior on websites nowadays, and if you put a lot of JavaScript on your server rendered HTML, it can get messy and it can get problems with synchronicity and the whole thing. Just works a lot better.

A

If you can think about it as an entire entire framework, all in JavaScript and you can, you can make those problems go away by solving them properly properly, instead of having a bunch of spaghetti code that that just tries to insert little bits of dynamic behavior here and there, so you have a lot fewer synchronization problems. If you develop all your javascript in a framework, it also gives us an incentive to use and improve the REST API and having a good rest.

A

Api makes the space and much more attractive platform, because it's applicable for much more than just this, you why? If someone else wants to make something based on I, don't know Drupal or rails, they can easily do it and use the same features. We all have so I believe a good rest. Api is absolute, absolute plus 4d space, and we should all work towards that. Of course, that also guarantees a better separation of concerns, because all communication between the UI and back-end have to happen through the rest api.

A

So you can't possibly call a back-end class like we can see in some GSB files in these space, maybe not as much anymore, but that used to be a really big problem in this space anyway. So now we have a few reasons about why we should use javascript. Then why amber specifically, because I believe amber has a very good way of solving problems using convention over configuration.

A

If you solve a common problem, you don't have to write a lot of codes and they make it very easy to follow best practice and they make it a hard to go against them. Example. I can give here, for example, if you create an item view page and you have / item / ID amber, will know how to find the item on your rest api, because it will just go to a / items. Let a slash ID on the rest api. It will automatically populate the model in your controller. You don't have to do that.

A

Will automatically know that that the plural of item is items things like that it will.

A

It will do a lot if you work within this standard crud system, but everything that that is outside of that scope is also able to make your figured doesn't happen automatically, but it does give you a lot of leeway and I'll get to that when I, when I get to the questions later on well I'll, show you a bit of how I modified the back end to work with the d space for rest api which isn't exactly following any standards or not. Not not.

A

The json api standard ever expects anyway, so amber was also designed with backwards compatibility in mind, and that's that's very important for them. They have six six week release cycles.

A

Synchronized across all modules that are the core of the project: that's amber Jay, CLI data authentication and they add new features as soon as they're done and legacy features are deprecated until at least the next major version of amber, and that that's only happened once before, because 2 point 0 just came out a few months ago, but once a feature is deprecated, you get clear warnings when you build a project and in your browser about this feature is deprecated. Here's how you can fix it.

A

If it's too much to explain in the console you get a link to where the documentation is on, how to fix it. Because of this, the the amber 2.0 release was a non-issue. All new features were already in there to regret gradually introduced. So if you wanted to use them, you could already use them, and the only thing that two point, oh really did was remove. Features that had been deprecated for months.

A

Amber is also a very developer friendly framework. It has great documentation, lots of tutorials guides, API, Docs and a great thing about it is they can all be viewed by version.

A

So maybe you're because of the six-week release cycle is very likely that you're not on the latest version, so you can see what the guides are for the version you're working with with again recommendations on how the make it future-proof, which is really useful, amber uses es6 today, es6 is in the new version of java script and the ember CLI is entirely based on the concept of javascript modules as they are in es6, so it comes with a built-in transpiler.

A

So that means that the JavaScript, the es6 goats, is transpired to es5 on build, so it runs on older browsers and once all browsers ketchup and start supporting new standards.

A

You can just take that transpiler out of the builds and it will just work natively in the browser, but because of these modules, you have also all the other cool new features in es6 available for you, like you, have fat arrows, restructuring, templating promises, there's there's really a lot of things that make the developers life easier in the new version of JavaScript and they're great to use a great feature of amber is also the computed property.

A

So we just took a look at let's do that again at these things, so these are just properties and an object. They're not functions. They have just a simple string value now amber has a concept called computed properties where you can say if I have a property first name and had a property last name, I can define a property, a computer property, full name. That depends on first name and last name and is basically a function that tells you how to compute the full name based on those other two properties, but in use.

A

It is exactly the same as a statically defined property and, of course, the first name or last name. Modifies full name will be updated automatically, so this is used everywhere throughout amber it's a great feature that helps you get things done really cleanly I'm really fast. It also has a huge amount of little helpers like comparable to things you find the in a posh pachi comments in Java for things like mapping, filtering is empty. Is blank stuff like that?

A

First, so a lot of lambda stuff in here as well like from that print mapping, filtering and finding it has a great extension for both chrome and firefox that allows you to analyze the running, amber application.

A

Doing its smallest details, you can go to any controller, any any template any object and see what its properties are, modify its properties and see your app change on the fly. It is great, as we saw before, has live reload out of the box, so any change you make your browser detects it and updates the page you working on immediately. That is great and a lot of other tools. You should really take a look at it. It's really developer-friendly.

A

The important feature, of course, from ms eli are add-ons. I, just explain that a little bit before add-ons are just mpm modules. There are already thousands of them available to solve all sorts of common problems. Like internationalisation, authentication, says, support yeah these these modules can be completely self-contained or they can use the overlay mechanism we're using in December or mix-and-match.

A

Amber is not going anywhere it's under active development; it has dozens of commits per week since its inception in 2011.

A

It has hundreds of posts each month on stackoverflow and on their official forum and monthly meetups all over the world, and it is used in production by Apple for like the new Apple music. Tap on iTunes is an Amber application. For example, Netflix use it yahoo linkedin group on vine, a lot of people use it in production and they wouldn't like to see it go somewhere soon. So you can try this out yourself. You can see our demo at december that meijer.com or install it yourself.

A

It's really not that hard, especially if you already have the Mirage to dependencies. You need nodes get and then then just install the new, amber, node, module and and you're good to go.

A

Instructions are on our github, of course. So now I'll try to answer the questions. I got again for this screencast. One of the questions I got is how much experience do you have with Amber well I've been following Emerson's about 2012 and I made a few test apps here and there we used it at admire for a couple of more complex JavaScript integrations in D space. We never use it for a complete app before so this project is definitely the largest thing.

A

I've done a number so far, then they asked me if this project was hard to do well. It was actually a little easier than most of the other things. I've tried so far, because the parts of D space we're showing in this prototype are mostly standard.

A

Things like showing resource editing in and saving it again, and that's precisely what embers configure a convention over configuration model is maeda a mate for and it's right up, Amber's le, let's say I put it like that, so it was a little easier and I most of the other things I'm done with it.

A

Then I had question about why the item display page is split up into so many different components. Would it not be possible to get everything straightened template?

A

So, let's take a look at that once more and IntelliJ, so you have here this: all this contains is basically what it's showing and then a little bit of structure how how it should be structured, but you can easily just go to the contents like like these things. You can easily just paste them in here.

A

You may have to change a little bit of the variable names you may have to prefix them with where the family members come from, but I would simply just work the same way, but I try to keep these templates as small as possible. That way. If you need to override something, you can override exactly what you want to customize and nothing else. So if, for example, you override the way the list of authors is rendered, you can override only that components.

A

But if it was part of the item page template, you have to copy the way all the other elements were rendered in your override as well, and if they were to change in a later update of this this, this UI you'd have to merge those changes with your customizations to update to the latest version, and that would create a lot of work and we want to avoid that.

A

So another question I got was: how does the connection to the rest api work? Well, we have four for the objects on the server side. We have models on the client side and we have models for things like items collections, communities, metadata and these models need to be linked to the rest endpoint. Somehow and if you use a json api rests rest api if it's all false a JSON, API standard I mean it'll all work out in a box. There are also implementations for things like web sockets and entire base, and things like that.

A

But, of course there was no standard implementation for d spaces rest api, so we had to tweak that a little bit so again, this this slide explains that if there's nothing out of the ordinary about it, you don't have to do anything. Your model will map to the endpoints exactly if it has the same name and if the properties of the model are all returned by the endpoints and if it has the expected end points for creating new models for listing them, etc.

A

So if things don't match up, you can fix that using adapters and serializers an adapter determines how the data is persistent to the back ends. So using an adapter you can specify exactly which endpoint to use for which kind of model better to use rest or web sockets or to add any additional parameters. In our case, I have to expand at the parameter, expand this all quite a few times using the adapter, and then you have serializers and they are responsible for formatting the data that is sent and received from the back end.

A

So it allows you to map a models property to a different Jason value from the server or to add or remove properties. An example in December is that metadata objects in the deep space, REST API nice page five at least I- believe that's changing these basics I'm, not sure that they don't have IDs. When they get returned, the Jason doesn't contain an ID for them, but the mall amber model expects an ID, so in the serializer I generate a new ID for every model that comes in so everything works smoothly.

A

You can also use a serializer to specify which data can be site, loaded and site. Loading means that you, if you get an item, you get all the metadata objects at the same time without having to send another request for them. So the expand all basically enables site loading in the D space rest api. So it is here, realize you define which properties can be side-loaded which can't and how that happens.

A

So to summarize, the adapter knows how to get the data for a specific model and the serializer knows how to translate that data into a model instance. In most cases the default adapter in civilization. Suffice.

A

But you can, if you need to make tweaks that are shared between all your models that are unique to the REST API, but not to a specific model. You can simply over idea that application, adapter or serializer and have that shared by all models, and if you need to tweak something specific for one model, you can create a serializer or adapter for that.

A

So the final question I got was how, with a search engine crawl, one of these JavaScript web apps. Now the problem with that is in a single page, JavaScript web app like December, the HTML file, is virtually empty. It gets filled by jas at runtime. So if it gets viewed by a browser that doesn't understand chain in JavaScript, there will be no content, and this used to be a big problem for for crawlers.

A

So Google had these Ajax crawling guidelines to fix that problem, but they deprecated those a last October, because their crawler BOTS can now just work with JavaScript apps day. They can interpret interpret JavaScript just fine by now, and they advise you not to serve static content that I crawlers anymore. That's all good and well for Google, but not all search engines already claimed to be compatible. So if you want to support more, you have a few options. The the most common one is phantom j/s, so fandom JS is a headless browser based on webkit.

A

It was designed for automated testing and it can be used to generate static, HTML versions of a JavaScript app. So what you do is you use it to generate the static versions every night or every time you content changes, and then you add a fragment meta tag, view HTML to tell the crawler where to look for these static files, and the solution has been used by many j/s apps in the last few years. It's been working well, but it's it can be a bit complicated to set up.

A

So there have been a lot of premium services to do that thing. For you, and most of these now support amber as well. There is a few dedicated to ambler, and usually it just means you install an Amber add-on in your application and add a few lines of config and then you can use the premium service.

A

Amber is also working. The Ember core team is working on fastboot, and that is an atom that is designed to speed up the first page load of an Amber app. So basically they want to render amber pages server-side. In a note, virtual Yahveh, a JavaScript machine and just sent the pre rendered HTML to the client and as soon as a client has downloaded all the JavaScript required, it will stop. It will take over and start running as the JavaScript app.

A

We know that has the nice side effect that it will also work for browsers that don't support javascript at all, but currently fastboot is still in alpha and they don't advise you to use it in production just yet.

A

That's it. Thanks for your attention.