Call to newbies and former newbies for your cookbook wishlist

1

Over in the how to beat angular js in the developers mindset

@rafalp brought up the fact that ember doesn’t have enough cookbook style guides available and up to date. @kylecoberly suggested a call for recipes or “Ember Legos”, which I think is a great idea and so I’m creating this thread.

List out some common things you try to solve in ember or any webapp for that matter that aren’t in the cookbook.

UPDATE

I’m hoping to get some people together and maybe do a mini hackathon for these issues. If you’re interested let me know. Probably will be NYC. I also contacted Ember NYC to see if they would be keen on doing this for one of their hacker hours. At the end of the hack we’ll make a pull request to add to the cookbook.

END UPDATE

I’ll start with

here are some from @rafalp

  • Bootstrap Tooltips
  • automagically updating dates via moment.js
  • RPC for things that don’t follow REST
  • Change page title when user transitions into a route
  • Common design patterns for handling forms , component vs controller
  • How to use CSRF in my adapter
  • How to lazily load heavy 3rd party libs like zxcvb.js
  • How to use google CAPTCHA

I’ll add a few

  • Modal dialogs - it’s in there already but it’s not really plug and play nor is it very fancy
  • integrating jquery plugins in components - there is a really simple description of this in an ember cast but it’s not totally up to date
  • Nested components data down action up style
  • using services to wrap your server call
  • easy rails integration
  • how to handle nested routes
  • authentication strategies with devise
  • deploying with rails
  • drag and drop with a third party plugin or with native
  • socket / pushing data
  • Cross origin local and live
9 Likes
2

Let me list criteria for what I would consider complete reciple here:

Uses heartbeat from “redrawing views” recipe, but contains condition that turns loop off in testrunner (so it won’t jam)

Demonstrates how to define custom transform for Ember-Data to to convert strings with ISO dates into moment objects and vice-versa.

Shows how to write write alias for computed property, so you don’t have to write extra boilerplate for every dynamically updated date.

// this is nice:
dynamicPostedOn: MyUtil.boundToClock('model.postedOn'),

// this is boilerplate:
dynamicPostedOn: function() {
    return this.get('model.postedOn');
}.property('model.postedOn', 'clock.tick').readOnly()

RPC for things that don’t follow REST

Humm, perhaps example of custom method on ApplicationAdapter, and going from there methods for RPC’s on Models, in cases when RPC is associated with model instance, ergo:

// this will send RPC /api/v1/invoices/1/send/ that will cause backend to send e-mail with pdf
invoice.send()

Example how to handle complex params in routes in backends that do it differently than Rails:

/thread/hello-i-popular-way-for-doing-urls-in-django-1232/
/thread/hello-i-popular-way-for-doing-urls-in-php-apps.1232/

This recipe should show how to use route hook for splitting :param value into slug and ID as well as implementing param serializer for model reversal into such :param.

1 Like
3

+1 for sure. I have naturally come up with some patterns in my work. I will try to share given that elusive free time everyone is talking about.

4

@fr33dm if you don’t have time to put up a solution it would be great to get more ideas for what the problems are.

5
  • How to properly use Services
  • Role your own Authentication
  • Migrating to Ember CLI
  • Nested Components

are a few.

6

Hey guys, I have to say I am the target audience for this. I’m about 4 weeks part time into Ember, and have found it very confusing so far. Maybe my background will give you guys some direction on how people are coming into Ember now, and what they are looking for.

I’d say I’m an expert in PHP and jQuery, and spend 6 days a week coding in WordPress for my job. WordPress has recently built in a RESTful API, so I wanted to start using WordPress as my API powering an MVC style site/app. This is the future of WordPress, and as you all know, that is a massive community. I don’t use VIM (I use Coda), and a stay away from the console as much as I can.

So, the whole concept of pre-compiling templates is really new to me, and I have to say it’s annoying. I know the Ember senior team are very adamant that a build-process is a natural thing for developers these days, but if you’ve come out of PHP and/or WordPress it is foreign. So having a lot of examples built around having everything in index.html is a red herring, because anyone doing anything more complicated than a “hello world” is going to need to compile templates, and that adds a whole new learning curve to the process. It took me awhile to figure out that I now need to learn Node, NPM, and something like Grunt. So having a basic example on how to compile, starting from 0-knowledge about Node/Grunt would be awesome (the best case would be to do away with compiling all together - and still have decent performance - I know I’m dreaming).

A really great idea to get newbie’s on the Ember band wagon? A Coda plugin to compile templates, minify code etc on save. That way I don’t need Node on my server, or need to learn Grunt/Ember-CLI etc. It would make it way easier to get into Ember for sure.

Next was trying to build an authentication solution, there are a few tutorials out there, but they are all different and many are out dated. This was the best I found, and it seems to use Routes for a lot of things the official docs suggest you use Controllers for. Seems like the official docs should have the definitive login/logout example, that stores tokens in LS or a cookie etc…

And don’t start me on how many examples are out there pushing Views, when the Ember team are saying not to use them in favor of Components. It also seems like a lot of what you can do in Controllers can be done in Routes, which is confusing.

So, once I got logins working, the next was submitting a form and updating the server, and animating a slide-out menu (that changed depending on authentication status), a model overlay, a universal error message area, and uploading a file.

Of the above, I’d say the error message thing is the hardest (behind login/logout). A good guide to have would show how to build a Header like you see on this site, or StackOverflow. Show how to have a message area, a searchbox, and an area for errors. Most examples show how to do an error message inline on a form, but what about something that has all the HTML in the App template, but different routes/controllers can update it separately, without having to repeat a lot of the same logic on every controller. Think about the way StackOverflow’s badges notification might work…

Reiterating above, there is very little documentation/guides showing how to build App level features that aren’t specific to a Controller. I’ve only just started to figure it out (I think), using events that bubble up and trigger something (very little concise, easy documentation and/or guides around this critical Ember feature).

Animations/transitions are also lacking. Seems like everyone says use “Liquid Fire”, but that’s another big learning curve for something as simple as “if error, slide down message” or “slide in new route from the right side”.

A simple example of a “loading spinner” next to the form submit button would be great to have for example.

I have plenty more to add if you care to hear them.

4 Likes
7

@drewbaker please add more

8

I would love to see some more examples in the docs of why to use certain things instead of just how. I think that is something that would be very helpful to learning. The API docs are great, and I love the way that they’re laid out, I just wish some of the examples weren’t so trivial.

For example, the docs on Ember.ArrayProxy states that “This makes it very useful for a number of binding use cases or other cases where being able to swap out the underlying array is useful.”. Perhaps, like I saw mentioned in another post, the guides could go a little bit more in depth on what those use cases would be, and how they apply to ambitious applications. What binding do I get from ArrayProxy that I don’t get from binding to an Array? Not looking for answers in this thread, just using it as an example.

1 Like
9

How about connecting ember-simple-auth in components using the ember cli addon

10

I would love a no frills tutorial on authentication with:

  1. Facebook
  2. Twitter
  3. Github
  4. Email/Password
  5. All of the above.

So far, I’ve been using Rails as my backend API server with a token based authentication. I guess I don’t quite understand how Facebook/Twitter/Github login fits into that.

11
  • Applications that persist data but are not tied to a route
  • CRUD without ember-data. i.e. fetch a list of post items then save change to a single item to an api. Could the new use of service the best approach ?
  • A TODO app where one of the items can be selected, or become the ‘active’ item and a toolbar above the list can edit its properties i.e. text, background color. The inputs on the toolbar would become disabled if no item was selected.

EDIT: Here is a jsbin to illustrate a simplified version of the problem I was struggling with in the third item

12
  • Dealing with a backend REST with “inline relations” (JSON relations inside a main JSON object rather than separate sideloading JSON structures).
  • Using a framework-agnostic javascript library (say, a chart library) in Ember (make some sort of wrapper?)
  • +1 for authentication
  • Advantced topic: Make ember apps usable offline (that is, sync data when the network connection is available again)
1 Like
13

I’m a few months in now, building a first app that I’d expected to be simple, but wasn’t. I’d like to see more cookbooks for solving problems with basic ember things that the docs may cover, but you don’t learn how to use by reading the small-print, e.g. loading spinners, promises, using the run loop.

Linking to open source projects / ember-cli plugins that demonstrate things may be a good timesaver.

How to pull data from other libs into Ember (routes? controller?)

It’s taken me months to realise I can, and probably should, do this in routes because of promises and loading/error states. It’s in the docs, but didn’t jump out at me. Eventually saw some other code that did this and felt pretty silly. For example something like https://github.com/jsoma/tabletop/issues/75

Bonus points for:

  • Ember-CLI modules/globals covered as part of this.
  • saying whether controller computed properties for this are an anti-pattern.

I just found my original call-for-help with this: ember.js - Where to put code from another JS library in Ember: controller, model, adapter, service? - Stack Overflow

Spinners for each item in an index page / list view

Imagine you’re reimplementing the qunit test runner and want to see tests pass/fail as it calculates them, or you’re adding a computationally expensive graph to the page after it’s done the histogram binning on the data it was sent. You want them to see the profile info etc as soon as it’s downloaded, and see a spinner where the histogram will appear later.

Routes don’t do this, they freeze / spinner the whole page until everything is ready, because there’s a route for the index page, not a route for each item rendered inside of it. They have a controller so I’m inclined to put the logic there, but it seems like reinventing the wheel.

Where to put domain logic, or “Don’t put your domain logic in Rails Ember”

We have some complex business logic that is fed into an ember controller. I’m glad I didn’t write that code in the ember controller, instead using service objects (or something like that) that could be tested independently. Some beginners might not do that, or not figure out how to do that, and then find it hard to test their complex business logic because of the ember testing helpers. A cookbook example showing how easy it is to put stuff in the utils directory, call them in the controller, and test them with qunit without any ember helpers might be good.

Promises and run loop / run later for intensive computations

This one’s a bit of a repeat, as it’s partly spinner for indexes, and partly integrating with 3rd party libs.

Promises are conceptually simple, but, for me, the docs don’t give practical examples. Some more fleshed out examples, or recipes for solving typical problems with them, could help a lot.

  • Using a promise to wrap a callback of another lib, and saying if the runloop is necessary. e.g. https://github.com/jsoma/tabletop/issues/75
  • wrapping slow computations so the browser doesn’t freeze, e.g. a histogram binning function or some other intensive thing; this is very similar to waiting for an ajax call, except the CPU will be busy? How to integrate with the route / controller / components.

How to filter an index page with on-page controls (data dependencies and updates)

This last one might be a bit too much, but I think it’s a general problem and I’d have found it really useful a couple of months ago, and might be a good complex example.

Imagine you have a restaurants index page that lists them all as little profile squares that the user can click to discover more. Your users want to filter by distance and allergy requirements. So somewhere in the template hierarchy (where?) you add a sidebar with forms where they fill that in (like skyscanner or booking.com or whatever). That gets bound to some controllers. The restaurants then get highlighted or removed from the page based on the filter constraints.

This seems really obvious, but I struggled. As a beginner you soon get into a rats nest of controllers with computed properties, needs returning the wrong controller instance (the docs say they’re singletons, but they aren’t if you use render! I want those hours back), not understanding when Ember.Data arrays update computed properties, and arraycontroller filterby ignoring properties set by decorating item controllers. Etc etc whine whine. :slight_smile:

14

Basically the Ember equivalent for:

jQuery(document).ready(function(){
    jQuery('.some-element').fadeIn();
});

I assume is uses simething like Ember.$ and runs on an event hook, but which one? activate? didInsertElement? On a View? Component? Route? Controller?

For the beginner, something showing how to properly use jQuery in Ember for things like drop down menus and regular event based interactions, but also the correct way to run code on the equivalent of “ready” but after each route transition obviously. How about on window resize?

1 Like
15

Generally, something like this would be on the view or component that’s showing the element and look something like this:

fadeSomethingIn: function(){
    this.$(".scoped-selector").fadeIn();
}.on("didInsertElement")
1 Like
16

Thanks, but can that work in a controller? Should it be done in a Controller? What about doing something on an action in a Controller?

var ApplicationController = Ember.Controller.extend({
    menuOpen: false,
    actions: {
        toggleMenu: function(){
            // This doesn't work.
            this.$('.scoped-element').slideDown();
        }
});
17

How to setup a basic form, and have it work the Ember best practice way. For example, is this right?

    <form {{action "submit" on="submit"}}>
         {{input name="username" value=username placeholder="EMAIL ADDRESS"}}<br>
         {{input type="password" name="password" value=password placeholder="PASSWORD"}}<br>
    
         <button {{action "submit"}} class="button">Log In</button>

    </form>

Not sure if you should have multiple actions like that?

How to then do more complicated things, like having common parts of a form in a component? What about stylist selects, submitting an image etc? Does it need to be connected to a model?

18

this.$() doesn’t exist in controllers, only views or something that inherits from a view (like components). The reason is that controllers are for logic and data- they aren’t aware of how any of it is being presented. They have no concept of the DOM or selectors or anything. In practice, you can just use Ember.$() to access the jQuery object anyway, but that’s almost never what you want to do.

In the short-term, all of the logic in your example above should be in the view. In the longer-term, you’re going to have an application component instead of an application controller and view, and it will all be in the application component.

19

“for ambitious web applications” needs to be reinforced by educating getting to such lofty goals. There seems to be 20 posts/todos apps on repeat but very little that goes along with the motto. Explaining what the 20% of ember DSL that the pros use is, when & why they use it would be a start… Helpers/Utils/Mixins/Services…

  1. Loading/Managing complex data relations… What are the rules? code examples from say… an app w/ a user that leverages many 'has-many’s (and one example of an extra link in the chain… i.e. user–>has-many-item1>–>item1 ‘has-many’ → item2

  2. Injecting Services (top use-cases of when to use & diff methods)

  3. Nav-Tabs native or bootstrap/foundation CSS. With & without changing of the routes on the tabs

  4. Saving/maintaining data through a multi-tab wizard sequence.

  5. Authentication & Authorization

  6. Datepicker that persists

  7. File-uploading w/ progress bar that persists

  8. Editing using content editable

  9. Ember Table example

  10. Ember Notify example

  11. Parralax & / Or changing color/size Nav on resize, unless optimal is just CSS3

Selfishly other topics would be greatly appreciated if guides were available within ember-cli…

-setting up email & mandrill -dynamic subdomain generation from users -full deloy sequence using ember-cli-deploy that incorporates fastboot. -adding dynamic Title/Description Meta tags to each page (necessary for non-amateur SEO) -Adding Video (WebRTC?) to an ember app -Neat advanced tricks w/ a Task Runner like grunt/gulp to run automation -Using Node Webkit for a Mobile App

Last but not least, the downlow on Mobile Best Practices

3 Likes
20

I have been trying to find words to describe this problem. For me, collecting a large amount of input data across multiple pages of the wizard then processing all that data into a step by step plan for the user (that can be saved for later viewing).