New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃枼 馃敡 Vue.js #7

Closed
EricSimons opened this Issue Apr 19, 2017 · 29 comments

Comments

Projects
None yet
8 participants
@EricSimons
Member

EricSimons commented Apr 19, 2017

Current Status

Codebase in progress @ github.com/vilsbole/realworld-vue

Interested in helping out? Say hello! 馃帀 gitter.im/realworld-dev/vue

Todo:

  • 馃弫 Fork the starter repo & post the link in this issue
  • 馃帹 Create logo for repo & update issue status (@EricSimons)
  • 馃敤 Implement all of Conduit's functionality per the spec & API
  • 馃憖 Peer review of final codebase by RealWorld admins & community (RFC)
  • 馃帀 Tag v1 release, move repo to main org, and officially list it on the README!

Anyone out there interested in this? Many folks have been asking for a RealWorld Vue codebase.

@mchandleraz

This comment has been minimized.

Show comment
Hide comment
@mchandleraz

mchandleraz Apr 21, 2017

I've been interested in getting into Vue lately... I don't think I've got time today, but maybe over the weekend. Definitely by Monday I should have a PR. I'll update this issue once I'm done :)

mchandleraz commented Apr 21, 2017

I've been interested in getting into Vue lately... I don't think I've got time today, but maybe over the weekend. Definitely by Monday I should have a PR. I'll update this issue once I'm done :)

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Apr 21, 2017

Member

Awesome! Just saw your fork of the boilerplate :)

For those out there interested in helping/watching, you can check out @mchandleraz WIP repo over at https://github.com/mchandleraz/realworld-vue

Member

EricSimons commented Apr 21, 2017

Awesome! Just saw your fork of the boilerplate :)

For those out there interested in helping/watching, you can check out @mchandleraz WIP repo over at https://github.com/mchandleraz/realworld-vue

@EricSimons EricSimons added wip and removed seeking engineers labels Apr 21, 2017

@EricSimons EricSimons changed the title from Vue.js Frontend to Vue.js [Frontend] Apr 21, 2017

@mchandleraz

This comment has been minimized.

Show comment
Hide comment
@mchandleraz

mchandleraz Apr 21, 2017

Thanks for updating, Eric. I was just coming to add a link to my repo and let others know they're welcome to help. If anyone wants to join, open an Issue or hit me up on Twitter @mchandleraz so we can coordinate our efforts.

-Matt

mchandleraz commented Apr 21, 2017

Thanks for updating, Eric. I was just coming to add a link to my repo and let others know they're welcome to help. If anyone wants to join, open an Issue or hit me up on Twitter @mchandleraz so we can coordinate our efforts.

-Matt

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Apr 21, 2017

Member

@mchandleraz FYI I made a custom logo that you can use for the README:

vue-realworld-logo

Member

EricSimons commented Apr 21, 2017

@mchandleraz FYI I made a custom logo that you can use for the README:

vue-realworld-logo

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Apr 23, 2017

Member

Just set up the Gitter chatroom for this! Lets do collaborator coordination in there 馃憤

cc/ @mchandleraz

Member

EricSimons commented Apr 23, 2017

Just set up the Gitter chatroom for this! Lets do collaborator coordination in there 馃憤

cc/ @mchandleraz

@EricSimons EricSimons changed the title from Vue.js [Frontend] to 馃枼 馃敡 Vue.js [Frontend] Apr 24, 2017

@EricSimons EricSimons added the frontend label Apr 24, 2017

@EricSimons EricSimons changed the title from 馃枼 馃敡 Vue.js [Frontend] to 馃枼 馃敡 Vue.js Apr 24, 2017

@brwr

This comment has been minimized.

Show comment
Hide comment
@brwr

brwr Apr 26, 2017

Collaborator

@mchandleraz Any updates on this? Anything we can do to help?

Collaborator

brwr commented Apr 26, 2017

@mchandleraz Any updates on this? Anything we can do to help?

@michalzagrodzki

This comment has been minimized.

Show comment
Hide comment
@michalzagrodzki

michalzagrodzki Apr 26, 2017

@mchandleraz I would be happy to contribute with development of this repo. Can I send my pull-requests?

michalzagrodzki commented Apr 26, 2017

@mchandleraz I would be happy to contribute with development of this repo. Can I send my pull-requests?

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Apr 26, 2017

Member

@michalzagrodzki feel free to make PR's 鈥 I'm sure @mchandleraz would really appreciate it!

Member

EricSimons commented Apr 26, 2017

@michalzagrodzki feel free to make PR's 鈥 I'm sure @mchandleraz would really appreciate it!

@atilacamurca

This comment has been minimized.

Show comment
Hide comment
@atilacamurca

atilacamurca Apr 26, 2017

@mchandleraz the issues are disabled, can you enable back, please?

atilacamurca commented Apr 26, 2017

@mchandleraz the issues are disabled, can you enable back, please?

@brwr

This comment has been minimized.

Show comment
Hide comment
@brwr

brwr Apr 26, 2017

Collaborator
Collaborator

brwr commented Apr 26, 2017

@mchandleraz

This comment has been minimized.

Show comment
Hide comment
@mchandleraz

mchandleraz Apr 27, 2017

Sorry guys, been super busy w/ life. Just got Issues enabled, and I'm taking a look at the PRs now. Thanks for the help everyone.

mchandleraz commented Apr 27, 2017

Sorry guys, been super busy w/ life. Just got Issues enabled, and I'm taking a look at the PRs now. Thanks for the help everyone.

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Apr 27, 2017

Member

No worries @mchandleraz! 馃嵒

Member

EricSimons commented Apr 27, 2017

No worries @mchandleraz! 馃嵒

@vilsbole

This comment has been minimized.

Show comment
Hide comment
@vilsbole

vilsbole Sep 14, 2017

Since @mchandleraz is MIA since a few months, I started a new fork https://github.com/vilsbole/realworld-vue
For the moment, it's simply implements Home, Articles, and Comments.
There is still a lot to do, but with your help we should be able to finish quickly

vilsbole commented Sep 14, 2017

Since @mchandleraz is MIA since a few months, I started a new fork https://github.com/vilsbole/realworld-vue
For the moment, it's simply implements Home, Articles, and Comments.
There is still a lot to do, but with your help we should be able to finish quickly

@michalzagrodzki

This comment has been minimized.

Show comment
Hide comment
@michalzagrodzki

michalzagrodzki Sep 14, 2017

@vilsbole Lovely idea. When I will have some time will send pull requests.

michalzagrodzki commented Sep 14, 2017

@vilsbole Lovely idea. When I will have some time will send pull requests.

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Sep 27, 2017

Member

@vilsbole @michalzagrodzki awesome! How is the progress going? Should I update this issue to point at your new repo? Lmk!

Member

EricSimons commented Sep 27, 2017

@vilsbole @michalzagrodzki awesome! How is the progress going? Should I update this issue to point at your new repo? Lmk!

@vilsbole

This comment has been minimized.

Show comment
Hide comment
@vilsbole

vilsbole Sep 28, 2017

@EricSimons That would be great! It's moving forward smoothly, there are still a few tickets and it should be simple to complete.

vilsbole commented Sep 28, 2017

@EricSimons That would be great! It's moving forward smoothly, there are still a few tickets and it should be simple to complete.

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Oct 2, 2017

Member

@vilsbole just updated this issue to point at your repo! 馃憤

Member

EricSimons commented Oct 2, 2017

@vilsbole just updated this issue to point at your repo! 馃憤

@disjfa

This comment has been minimized.

Show comment
Hide comment
@disjfa

disjfa Oct 30, 2017

Just saw this, and i wanted to mention my kazoo repo, i like real world examples and am building a real world example for vue as an example. And then i found this one. In my example i mention and setup some extra code splitting in modules for each page type. Maybe useful.

I also have a couple of medium posts for explaining mt things https://medium.com/@disjfa/lets-store-some-data-in-a-vue-app-808d8b86cb79 Just for info.

disjfa commented Oct 30, 2017

Just saw this, and i wanted to mention my kazoo repo, i like real world examples and am building a real world example for vue as an example. And then i found this one. In my example i mention and setup some extra code splitting in modules for each page type. Maybe useful.

I also have a couple of medium posts for explaining mt things https://medium.com/@disjfa/lets-store-some-data-in-a-vue-app-808d8b86cb79 Just for info.

@vilsbole

This comment has been minimized.

Show comment
Hide comment
@vilsbole

vilsbole Oct 30, 2017

@disjfa Nice article! I love the module code splitting. It would be nice to have in the project, so please feel free to submit a PR.

vilsbole commented Oct 30, 2017

@disjfa Nice article! I love the module code splitting. It would be nice to have in the project, so please feel free to submit a PR.

@vilsbole

This comment has been minimized.

Show comment
Hide comment
@vilsbole

vilsbole Dec 3, 2017

@EricSimons We're reading for the peer-review. I made a PR to the starter-kit, should i submit elsewhere as well?

vilsbole commented Dec 3, 2017

@EricSimons We're reading for the peer-review. I made a PR to the starter-kit, should i submit elsewhere as well?

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Dec 19, 2017

Member

@vilsbole so sorry about my delay here, I'm just seeing this now! I just spun up a new repo for it and added y'all to it: https://github.com/gothinkster/vue-realworld-example-app

I'm pinging Evan You now to see if he/anyone else might be able to help with the RFC 馃憤 Awesome work everyone!!

Member

EricSimons commented Dec 19, 2017

@vilsbole so sorry about my delay here, I'm just seeing this now! I just spun up a new repo for it and added y'all to it: https://github.com/gothinkster/vue-realworld-example-app

I'm pinging Evan You now to see if he/anyone else might be able to help with the RFC 馃憤 Awesome work everyone!!

@EricSimons

This comment has been minimized.

Show comment
Hide comment
@EricSimons

EricSimons Feb 22, 2018

Member

FYI I just added this to the homepage- keep up the great work y'all!!

Member

EricSimons commented Feb 22, 2018

FYI I just added this to the homepage- keep up the great work y'all!!

@EricSimons EricSimons closed this Feb 22, 2018

@LinusBorg

This comment has been minimized.

Show comment
Hide comment
@LinusBorg

LinusBorg Mar 16, 2018

Hi everyone,

I'm Thorsten from the Vue.js core team. I was asked to tak a look at this. Great work so far, thanks to everyone contributing!

I didn't have much time to go into the details, so I chose to take a look at the resulting bundle first, as it was mentioned to me that the bundle was surprisingly big, compared to e.g. the react example.

And in fact, the minified vendor bundle comes in with a whopping 957kB! that's quite heavy, I would say:

bildschirmfoto 2018-03-16 um 20 06 29

So I ran npm run build --report to see what gets included, and noticed a few things:

bildschirmfoto 2018-03-16 um 19 42 36

So on first sight we might realize that there are quite a lot of heavy dependencies in the vendor bundle that you won't find in the react example, whose only "external" dependenies apart from all things directly related to react&redux&router are:

{
  "dependencies": {
     "": "excluded all things react-related",
    "marked": "^0.3.6",
    "superagent": "^2.3.0",
    "superagent-promise": "^1.1.0"
  },
}

By comprison, this repositoy includes these additional dependencies:

"dependencies": {
     "": "excluded all things directly vue-related",
    "axios": "^0.16.2",
    "moment": "^2.19.2",
    "vue-axios": "^2.0.2",
    "vue-markdown": "^2.2.4",
  },

Disclaimer: all package sizes from https://bundlephobia.com

  • vue-axios is fine, because it's just a thin wrapper around axioswhich we need for api requests.
  • moment on the other hand, is included with all locales, adding an estimated 220kB minified to the bundle alone. the react example doesn't add any date lib at all, neither does the angular example (but angular comes with some predefined 'pipes' for that I think).
  • vue-markdown heas some very heavy dependencies, and adds 528.1kB minified(!). This is mostly because it has these dependecies:
"dependencies": {
    "highlight.js": "^9.12.0",
    "markdown-it": "^6.0.1",
    "markdown-it-abbr": "^1.0.3",
    "markdown-it-deflist": "^2.0.1",
    "markdown-it-emoji": "^1.1.1",
    "markdown-it-footnote": "^2.0.0",
    "markdown-it-ins": "^2.0.0",
    "markdown-it-katex": "^2.0.3",
    "markdown-it-mark": "^2.0.0",
    "markdown-it-sub": "^1.0.0",
    "markdown-it-sup": "^1.0.0",
    "markdown-it-task-lists": "^2.0.1",
    "markdown-it-toc-and-anchor": "^4.1.2"
  }

Which is nice because it adds so much cool functionality, but makes the app super-heavy. By comparison, the markdown-lib that the react example uses only adds 17.8kB minified - markdown-it alone, without all the extensions listed above, is 88kB minified.

So by replacing vue-markdown with marked, and repacing moment with e.g. date-fns (29kB minified), or just doing it by hand, like I think the react example did, would cut down vendor bundle size from 957 to around 260 kB (with date-fns) or 230kB (with date-formatting done manually).

That would also bring this example closer to feature-parity with the other implementations, who don't support syntax highlighting, emojis, MathML, date locales and all the features that the above dependencies include (wether or not the Vue app actually uses them.

I hope this helps improving this example a fair bit, and I will look further into it this weekend (especially the actual implementation), provided I find the time between IKEA and a family birthday.

Keep up the good work!

LinusBorg commented Mar 16, 2018

Hi everyone,

I'm Thorsten from the Vue.js core team. I was asked to tak a look at this. Great work so far, thanks to everyone contributing!

I didn't have much time to go into the details, so I chose to take a look at the resulting bundle first, as it was mentioned to me that the bundle was surprisingly big, compared to e.g. the react example.

And in fact, the minified vendor bundle comes in with a whopping 957kB! that's quite heavy, I would say:

bildschirmfoto 2018-03-16 um 20 06 29

So I ran npm run build --report to see what gets included, and noticed a few things:

bildschirmfoto 2018-03-16 um 19 42 36

So on first sight we might realize that there are quite a lot of heavy dependencies in the vendor bundle that you won't find in the react example, whose only "external" dependenies apart from all things directly related to react&redux&router are:

{
  "dependencies": {
     "": "excluded all things react-related",
    "marked": "^0.3.6",
    "superagent": "^2.3.0",
    "superagent-promise": "^1.1.0"
  },
}

By comprison, this repositoy includes these additional dependencies:

"dependencies": {
     "": "excluded all things directly vue-related",
    "axios": "^0.16.2",
    "moment": "^2.19.2",
    "vue-axios": "^2.0.2",
    "vue-markdown": "^2.2.4",
  },

Disclaimer: all package sizes from https://bundlephobia.com

  • vue-axios is fine, because it's just a thin wrapper around axioswhich we need for api requests.
  • moment on the other hand, is included with all locales, adding an estimated 220kB minified to the bundle alone. the react example doesn't add any date lib at all, neither does the angular example (but angular comes with some predefined 'pipes' for that I think).
  • vue-markdown heas some very heavy dependencies, and adds 528.1kB minified(!). This is mostly because it has these dependecies:
"dependencies": {
    "highlight.js": "^9.12.0",
    "markdown-it": "^6.0.1",
    "markdown-it-abbr": "^1.0.3",
    "markdown-it-deflist": "^2.0.1",
    "markdown-it-emoji": "^1.1.1",
    "markdown-it-footnote": "^2.0.0",
    "markdown-it-ins": "^2.0.0",
    "markdown-it-katex": "^2.0.3",
    "markdown-it-mark": "^2.0.0",
    "markdown-it-sub": "^1.0.0",
    "markdown-it-sup": "^1.0.0",
    "markdown-it-task-lists": "^2.0.1",
    "markdown-it-toc-and-anchor": "^4.1.2"
  }

Which is nice because it adds so much cool functionality, but makes the app super-heavy. By comparison, the markdown-lib that the react example uses only adds 17.8kB minified - markdown-it alone, without all the extensions listed above, is 88kB minified.

So by replacing vue-markdown with marked, and repacing moment with e.g. date-fns (29kB minified), or just doing it by hand, like I think the react example did, would cut down vendor bundle size from 957 to around 260 kB (with date-fns) or 230kB (with date-formatting done manually).

That would also bring this example closer to feature-parity with the other implementations, who don't support syntax highlighting, emojis, MathML, date locales and all the features that the above dependencies include (wether or not the Vue app actually uses them.

I hope this helps improving this example a fair bit, and I will look further into it this weekend (especially the actual implementation), provided I find the time between IKEA and a family birthday.

Keep up the good work!

@atilacamurca

This comment has been minimized.

Show comment
Hide comment
@atilacamurca

atilacamurca Mar 16, 2018

moment already replaced by date-fns on PR gothinkster/vue-realworld-example-app#18

atilacamurca commented Mar 16, 2018

moment already replaced by date-fns on PR gothinkster/vue-realworld-example-app#18

@LinusBorg

This comment has been minimized.

Show comment
Hide comment
@LinusBorg

LinusBorg Mar 16, 2018

Oh geez, did I analyse the wrong repository? Sorry! :-P

LinusBorg commented Mar 16, 2018

Oh geez, did I analyse the wrong repository? Sorry! :-P

@atilacamurca

This comment has been minimized.

Show comment
Hide comment
@atilacamurca

atilacamurca commented Mar 16, 2018

@vilsbole

This comment has been minimized.

Show comment
Hide comment
@vilsbole

vilsbole Mar 18, 2018

@LinusBorg Thanks a ton for taking a look at the project!

Indeed vue-markdown is extremely heavy for the few features we use. By replacing it with marked we're now at a more reasonable size of 265kb. As for data-fns, we could do of course make a custom implementation, but unless we're enter a bundle size competition I'm in favour of not to reinventing the wheel.

screen shot 2018-03-17 at 16 49 25

Knowing that the project's code style is still heterogenous, I look forward to reading your review!

vilsbole commented Mar 18, 2018

@LinusBorg Thanks a ton for taking a look at the project!

Indeed vue-markdown is extremely heavy for the few features we use. By replacing it with marked we're now at a more reasonable size of 265kb. As for data-fns, we could do of course make a custom implementation, but unless we're enter a bundle size competition I'm in favour of not to reinventing the wheel.

screen shot 2018-03-17 at 16 49 25

Knowing that the project's code style is still heterogenous, I look forward to reading your review!

@vilsbole

This comment has been minimized.

Show comment
Hide comment
@vilsbole

vilsbole Mar 18, 2018

@atilacamurca I can't find a way to redirect the initial repo (without an ownership change), so I updated the description and README.

vilsbole commented Mar 18, 2018

@atilacamurca I can't find a way to redirect the initial repo (without an ownership change), so I updated the description and README.

@LinusBorg

This comment has been minimized.

Show comment
Hide comment
@LinusBorg

LinusBorg Mar 18, 2018

@vilsbole agreed, date-fns is fine. The main point is to keep the number and kind of framework-independent dependencies roughly equal, so bundle sizes are comparable. It's not a bundle-size contest, but it's an important detail nonetheless.

LinusBorg commented Mar 18, 2018

@vilsbole agreed, date-fns is fine. The main point is to keep the number and kind of framework-independent dependencies roughly equal, so bundle sizes are comparable. It's not a bundle-size contest, but it's an important detail nonetheless.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment