gothinkster / ember-realworld Goto Github PK
View Code? Open in Web Editor NEWEmber.js RealWorld Implementation
Home Page: https://ember-realworld.netlify.com/
Ember.js RealWorld Implementation
Home Page: https://ember-realworld.netlify.com/
Seeing a lot of 404's on the assets
Currently we use lots of controllers + templates but we should defer to use components where we can.
We should componentize the top-nav to be a component rather have it directly in the template.
Example from the Octane repo: https://github.com/patocallaghan/realworld-starter-kit/blob/master/app/templates/components/nav.hbs
Wanna write some tests:
Implement the "Your feed" section on the article list on the Homepage.
Features:
?feed=your
query paramWant to write tests?
Similar to #51
From @Alonski on April 24, 2017 10:59
Need to create a component for each post and use that in the feed
Copied from original issue: Alonski/realworld-ember#11
this.session.logOut()
We should able to follow/unfollow a user's profile
POST /api/profiles/:username/follow
Authentication required, returns a Profile
No additional parameters required
DELETE /api/profiles/:username/follow
Authentication required, returns a Profile
While I understand the value-add of Mirage in the development environment, especially when APIs are not built, in my opinion we don't really need it here. The API provided by gothinkster is feature-complete and I've never had any issues with it in development.
I find in my own development in this repo I'm always disabling it but reverting that change before committing.
Upsides:
Downsides:
I'd be interested in hearing your thoughts.
Im using Ember Realworld with Adonis realworld as backend, When they registrate, login and edit their account it works ok, but when it creates a new article the server returns a 500 code with the following message
{ message: "insert into articles (author, body, createdAt, description, slug, title, updatedAt, user_id) values (NULL, 'This is the content', '2021-05-16 01:39:07.272', 'This is the subtitle', 'this-is-the-title', 'This is the title', '2021-05-16 01:39:07.272', 1) - SQLITE_ERROR: table articles has no column named author", name: "Error", status: 500, … }
It seems that the frontend doesn't send the user id (and neither the createdAt date) to the backend when inserts a new article
Need to get the article Data and use it to dynamically show the page.
Currently is a static template.
Want to write tests?
Example from Octane app: https://github.com/patocallaghan/realworld-starter-kit/blob/4611cda2c1b9f391f976b111e2e23a833d3dd00c/app/templates/components/settings-form.hbs#L3-L9
Currently the logo in the top left is linking to index.html.
It should be converted to a link-to
and link to 'home'. The link should also set the default query params, i.e. tag=null, page=1 etc
From @Alonski on April 24, 2017 14:6
Create model for article
Use it for feed articles
Need to add pagination this using:
Ember-Impagination, Ember-Concurrency, Ember-Collection, Route-Actions etc
Copied from original issue: Alonski/realworld-ember#13
Currently the tag list is showing tags from all articles loaded. This is due to the tag-list finding all tags, which returns a live array.
An article has a hasMany
relationship with tags, so every time an article is fetched and it has tags, the live array will include it.
app/templates/settings.hbs
template content into a {{settings-form}}
componentuser
modelPUT /api/user
Example request body:
{
"user":{
"email": "[email protected]",
"bio": "I like to skateboard",
"image": "https://i.stack.imgur.com/xHWG8.jpg"
}
}
Authentication required, returns the User
Accepted fields: email, username, password, image, bio
This should be handled by user.save()
.
Octane example: https://github.com/patocallaghan/realworld-starter-kit/blob/4611cda2c1b9f391f976b111e2e23a833d3dd00c/app/templates/components/settings-form.hbs
From @Alonski on April 24, 2017 10:42
We should be using ESLint and Prettier +- Standard to format our Javascript.
If we need custom CSS we can use stylelint and stylefmt.
Maybe using SASS instead of plain CSS
Copied from original issue: Alonski/realworld-ember#10
marked
npm library to render the markdownhtmlSafe
. See Octane version hereFor better encapsulation we should add this behaviour to the article model.
Want to write tests?
Currently we use lots of controllers + templates but we should defer to use components where we can.
We should componentize the footer to be a component rather have it directly in the template.
Example from the Octane repo: https://github.com/patocallaghan/realworld-starter-kit/blob/master/app/templates/components/footer.hbs
From @Alonski on April 27, 2017 17:12
Create model for comments
Make it a hasMany on articles? #13
Copied from original issue: Alonski/realworld-ember#19
On an author's profile page we should be able to favorite/unfavorite articles
This should just start working when this is made to work in #46 from the homepage.
But worth calling out to verify that is actually the case
Follow-up issue to #99 to allow us to discuss without having to focus on the code changes.
Originally it was discussed that Ember Realworld would show how to build a Ember Classic application. A new separate app was then spun up which outlined how to build the RealWorld app using Ember Octane.
But it has since been suggested that these Ember apps should not be separate and should just be merged into this Ember RealWorld app. The thinking is that Ember Octane is not a separate framework but rather just an updating of syntax and the programming model.
Currently points to a static template.
Need to build to get the Data for the specific profile and show everything related to it
init
See similar implementation in the Octane version here
Add Comments to an Article
POST /api/articles/:slug/comments
Example request body:
{
"comment": {
"body": "His name was my name too."
}
}
Authentication required, returns the created Comment
Required field: body
We should have the ability to favorite/unfavorite articles
Features:
Want to write tests?
Current follow/unfollow buttons are not components so there’s a bit of duplication.
Similar to #52
Hello!
Due to governance changes, we are now using the realworld.io
domain for the RealWorld demo (both client and API).
Requests from conduit.productionready.io
are redirected to api.realworld.io
, but such a redirection might lead to inconsistent responses.
We encourage domain change for the community.
If this repository is maintained anymore, we'll consider hosting a demo of your implementation in a few weeks with the domain change.
The demo link will be added to the RealWorld documentation.
Currently, our Lighthouse score is quite low: 61 in Incognito.
According to this blog post some of the RealWorld examples have a score of 99:
https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/
We should work to improve our score. I am sure that there are low hanging tasks that we can do to increase this.
Here is the full report that I generated:
Lighthouse Report.pdf
We currently have no error page and non-existent urls result in a blank page.
We should add an error route see like here and an error template like here (yes it looks awful)
Want to write a test?
New version is out.
Makes sense to upgrade to it.
From @alexlafroscia on April 23, 2017 22:0
Since it would be great to have a solid test suite here, we should mock out the API using Mirage. The API is pretty simple so this should be a good task for someone that's looking for some low-hanging fruit.
Copied from original issue: Alonski/realworld-ember#8
It would be great to be able to turn on CI for our tests/linting. I believe there may be issues due to the repo being in the gothinkster org but we can see.
/cc @Alonski
From @Alonski on April 27, 2017 17:8
Create model for tags
Use it in articles model as a hasMany #13
Copied from original issue: Alonski/realworld-ember#17
I'd like to propose that we split the main user model into two models: user
and profile
. They are very similar but serve two subtly different roles.
user
- The current user. Can be used to tell if a user is logged in or not. Can be used on the settings page to edit a user's properties. Can grab the logged in user's article feed.profile
- Similar to a user but more to do with authors of articles. They can be followed, have their articles favorited/unfavorited.My reasoning? While I initially tried to use the same model in the Octane version of the app, this abstraction broke down when I needed use the same model between the settings page and article list/profile pages. (Octane repo: Profile, User)
The profile
model has the username as the primary key for identifying a user, they have no other unique identifier.
But then when editing the user we need to be able to edit the user's username. This is not possible as we are trying to treat this property as the primary key for the profile
. Also the /user
endpoint returns a unique integer identifier as well as the username.
Here are some sample payload responses from the API.
// User
{
"user": {
"id": 52999,
"email": "[email protected]",
"createdAt": "2019-03-31T00:15:23.573Z",
"updatedAt": "2019-04-05T07:25:08.330Z",
"username": "someusername",
"bio": null,
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/yoyoyo/128.jpg",
"token": "eyJ0eXAiOiJKV1..........."
}
}
// Profile
{
"username": "lifelonglearner123",
"bio": null,
"image": "https://static.productionready.io/images/wat-yo.jpg",
"following": false
}
What do you folks think?
Ember.js is often called out on having a large filesize. I'm wondering if ember-concurrency
can be removed in order to reduce the vendor.js
filesize.
I understand that it's useful for dropping tasks to prevent multiple executes of a task when a task is already being performed. Perhaps there's an alternative to using a task that can be leveraged?
From @Alonski on April 23, 2017 7:12
Need to create issues for all the features that need to be in this to comply with the realworld.
Copied from original issue: Alonski/realworld-ember#1
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.