How do I write glimmer aware ember application? - ember.js

I am writing a new big project with ember latest version and I don't get any deprecation in console. does that means it will work without major change for glimmer release.
Is there any design patterns or best practices should i follow to ensure it will work without any change after glimmer release ? (I know only DDAU( data down and actions up principle) )

I assume you talk about Glimmer2, because the current ember rendering engine is already Glimmer.
And you don't have to do anything specific. Just keep away from private API's.
As long you just use public API's Glimmer2 should just drop in, as well as Glimmer1 did. Glimmer2 is (probably) not a breaking change, so even deprecations of public API's should not break it. Still try to avoid any deprecations.

Related

Object.assign() in add-on in Ember app causes problems in IE11

I have an Ember app that uses several 3rd party add-ons. One of these add-ons uses Object.assign() which causes problem in IE11, specifically the error
Error: Object doesn't support property or method 'assign'
I know why this is happening, but I'm relatively new to Ember, and am not sure of the best way to handle/fix this. Based on my research, some options are:
Option 1: use polyfills (?)
I think there may be some additional libraries I can install, or options in Babel to set that will take care of this, but I have not been able to do so thus far. It's unclear whether any of these options would affect code from add-ons anyway, or if they only apply to code in the primary app.
Option 2: extend the add-on component to avoid Object.assign().
Unfortunately, the problematic lines are in the component's init(). When my extended component calls this._super(), the code I'm trying to avoid is run anyway. Is there a way to 'skip' the base component's init() and go straight to Ember's Component.init() (the add-on's _super()) ?
Option 3: ditch the 3rd party add-on, salvage what I can, and make my own component.
Irritating but do-able. At this point, it probably would have been faster to do that from the start.
Option 4: fix the add-on to remove the problem code. My hesitation here is two fold: 1, if this is something that I should somehow be managing within my app, it doesn't seem correct to make the add-on change (though there is definitely a 'best practices' argument to be made here). The bigger concern is that this is a low activity add-on. Even if I submit a PR with the change, I'm not sure how long it will take for a new release.
In the meantime, what would be the recommended practice? Point my app to a local build and then remember to update it to an 'official' version if/when it is released?
I suspect that Option 1, polyfills and/or build settings, is the most correct course of action, but I'm at a loss for what, specifically, to do.
Additional info:
My app was developed with Ember 2.7, and I am in the process of updating it to Ember 3.1. This issue exists in both builds.
You can include polyfill:
// ember-cli-build.js
let app = new EmberApp(defaults, {
'ember-cli-babel': {
includePolyfill: true
}
});

How do I detect an ember application at runtime

I'm trying to find a better way of detecting an ember application than searching for ember-application or window.ember.
Any ideas?
Unfortunately, there's no guaranteed way to detect Ember or an Ember Application. Javascript is fairly malleable, so you could have either on a page and not know where.
To detect Ember, just check for window.Ember. Nothing fancy here, it's pretty much the only way to know (until Ember is no longer global that is). I would say this works in most scenarios (both Ember global and Ember CLI apps).
Detecting an Ember application is much more difficult. The last time I checked, the Ember Inspector does this by checking every property on the window object using Ember.Application.detectInstance(). However, given the gaining popularity of Ember CLI, that will no longer work much of the time. Maybe you could override Ember.Application.create() and keep track of the instances?
In any case, I certainly wouldn't rely on being able to do either of these. It's simply not feasible.

Router Basics in 1.0.0-Pre.4 - what is the right way to write a router in current release?

I hate to ask such a newbie and vague question, but I imagine there must be others out there whose brains are also about to explode. I see related questions, but none that directly addresses my confusion.
I've just been introduced to Ember.js and I'm trying to learn the basics of the Router, but I can't find two sources that agree on how this is done. I suspect that I'm jumping in during an unstable transition. I'm using the latest 1.0.0-Pre.4 release.
The best I can figure, Router is the new mechanism, and possibly replaces StateManager - yes? Yet the classes listed under 1.0.0-Pre.4 API on the web site don't even list a Router object, nor does the guide make mention of it... yet, I get no complaints from javascript when I use sample code that extends Em.Router.
Ok cool, however it then barfs on the Router member "transitionTo" which is present in many of the demo projects, but is unrecognized in the current release.
So, I guess what I'm asking is not so much a direct question, as I am looking for a grounding point in a sea of contradictory information.
If starting out with Ember.js as it is RIGHT NOW (1.0.0-pre.4), with no history to contend with, what routing mechanism should I be looking at, and is there any tutorial or simple sample app that demonstrates and runs against this version of the library? Can you confirm my suspicion that the documentation is out-of-date in regard to routing?
Ember.js is a lot to learn, and if I ever hope to figure it out, I need to know what to ignore and what to embrace.
Thank you.
The best I can figure, Router is the new mechanism, and possibly replaces StateManager - yes?
Yes, Router is the new mechanism. It does not replace StateManager per-se. Early version of the Ember Router were based on StateManager. The new one (1.0.0-pre.4) is not, but StateManager is still an important part of the ember library. Many of ember's core components (models, views) rely are built on StateManager.
Yet the classes listed under 1.0.0-Pre.4 API on the web site don't even list a Router object, nor does the guide make mention of it... yet, I get no complaints from javascript when I use sample code that extends Em.Router.
The Router does not have API docs yet. I imagine these are in the works. When in doubt about a fast-moving open source project I always have a look at the tests. Ember has a really solid test suite, and in the case of routing you can learn a lot by reading through the integration tests here: routing/basic_test.js
Ok cool, however it then barfs on the Router member "transitionTo" which is present in many of the demo projects, but is unrecognized in the current release.
Sounds like those demo projects are out of date.
Can you confirm my suspicion that the documentation is out-of-date in regard to routing?
Re: the official docs I think both the API and Guides can be considered current, but be aware that not every ember feature has API docs so far. For sure there are many out-of-date sources floating around. Trek has been working to compile a list of out-of-date sources so that we can reach out to authors for a refresh. Here on Stack Overflow, anything related to the old router should now be tagged https://stackoverflow.com/questions/tagged/ember-old-router.
If starting out with Ember.js as it is RIGHT NOW (1.0.0-pre.4), with no history to contend with, what routing mechanism should I be looking at, and is there any tutorial or simple sample app that demonstrates and runs against this version of the library?
The ember team has been putting a lot of effort over the past few months into the Ember.js Guides - AFAIK they are all up to date WRT (1.0.0-pre.4) and are becoming more solid every day. They include a lot of detail about the new Router - see Ember.js - Routing for the most up-to-date information.
As for tutorials, there are several new ones that are worth a look. Check out this SO post for a few recommendations: Could someone point me to an ember.js project that uses the latest routing system? Bonus points if it uses ember-data as well
tip: build your own version of ember from master branch - they fixed few bugs :)

How should I evaluate different data store components for Ember?

Just in my reading over the last few days I've found at least three different extensions offering data store support for Ember: ember-data, sproutcore-datastore, ember-ezdata, and I think I might be missing one.
This range of options gives rise to several questions.
Obviously ember-data is the "official" extension, but it's also pretty heavily fenced with qualifications ("This isn't ready for production") from the core team.
How should I compare and evaluate these options?
In the SproutCore 1.x series, development was usually done with fixtures, and the data source wired in later. Can any of these options support that sort of workflow? Can I load some production data this way (might change with release versions, but not user-editable) and other data from my back-end data source?
ETA: Here's a related question.
Personally, I'm expecting big things from ember-data, but it does seem to have a little way to go to be "production ready".
When I started using Ember, the ember-data project had just begun, so I decided to create a simple persistence layer of my own. I ended up with ember-rest, which is a pretty thin layer over jQuery.ajax(). You can see it in use in this Rails example. By the way, you can load JSON data directly into ember-rest without hooking into a backend.
I'm under the impression that sproutcore-datastore is no longer maintained. I've never tried ember-ezdata.
Another worthwhile option to check out is ember-resource.
I hope this is enough to get you started.

Better Templating for Grails

For all the things I love about Grails I do have one small issue and this isn't really even a Grails specific problem. GSP changes require redeployments of the entire web application. I'm not talking about adding new dynamic data or major changes. These generally requires server side changes as well anyway.
But I'm talking about smaller changes like flipping the position of a couple of elements or modifying some simple static text on the page. So my question is, what are some patterns used or plugins, etc that allow minor changes to GSP's without redeploying the entire application? How can I make Grails template/GSP's more like templates and less requiring compiling?
I'm also possibly looking for something more designer friendly.
grails.gsp.view.dir, I think.
A trick to remember: add trailing slash and remember that grails-app/views will be added to it.
There is a Grails Plugin for using FreeMarker templates as views (I have not used this plugin myself). It is not listed as SpringSource supported, but I think the author is one the core grails devs and the plugin is based on a relatively new version of FreeMarker.