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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migration to new Front-end Framework/Library #211

Open
lpatmo opened this Issue Sep 24, 2016 · 12 comments

Comments

7 participants
@lpatmo
Copy link
Member

lpatmo commented Sep 24, 2016

See: branch white-sandpiper, started by @distalx. (https://github.com/codebuddiesdotorg/cb-v2-scratch/tree/white-sandpiper)

This'll require a bit of work, but the advantages are:

  • more people and projects are using ReactJS vs. Blaze, and more questions are being asked about ReactJS vs. Blaze
  • easier for new contributors?

Disadvantages:

  • will take work for us to rewrite our templates
  • possible harder learning curve for ReactJS vs. Blaze
@leewaygroups

This comment has been minimized.

Copy link
Collaborator

leewaygroups commented Sep 25, 2016

I think this article makes a nice read on Blaze vs React.
Blaze vs React

@duffbuster

This comment has been minimized.

Copy link

duffbuster commented Oct 12, 2016

+1

@nalbina

This comment has been minimized.

Copy link
Collaborator

nalbina commented Apr 22, 2018

I want to bring this back up to attention. We could slowly migrate components to react while not having to rewrite everything at the same time.

You can actually render React component inside blaze. https://guide.meteor.com/react.html#using-with-blaze using react-template-helper. WDYT

@railsstudent

This comment has been minimized.

Copy link
Collaborator

railsstudent commented Apr 22, 2018

We are actually learning React in the Sunday hangout

@nalbina

This comment has been minimized.

Copy link
Collaborator

nalbina commented Apr 22, 2018

yea, then this should be a great task for that right?

@d3vild06

This comment has been minimized.

Copy link
Collaborator

d3vild06 commented Jul 22, 2018

All, I and @distalx have been discussing this in more detail and we believe the better route would be to migrate the front-end to Vue.

Some highlights to why this framework would be a better choice:

 - Keep using declarative rendering via templates like Blaze (easier transition for contributors)
 - Incrementally adoptable. Meaning we can slowly replace all Blaze templates and run both in parallel
 - Learning curve is much lower and the overall syntax is much more intuitive 

The caveat is making Vue work within a Meteor project but there are OSS projects to make that work out of the box and it would be the same challenges for using React.

I didn't want to hijack this issue but I see we are also addressing the front-end replacement in the refactoring issue #443 so either one works.

Let us know your thoughts. I can work on creating a new branch where we can start playing/testing creating and/or replacing components in Vue.

@lpatmo

This comment has been minimized.

Copy link
Member Author

lpatmo commented Jul 22, 2018

I don't mind either way, but can you highlight what the advantages of migrating to vue.js vs. keepign blaze are?

@d3vild06

This comment has been minimized.

Copy link
Collaborator

d3vild06 commented Jul 22, 2018

@lpatmo there is no issue in keeping blaze to be honest. It works for the current state of the project. However, some advantages to switching to Vue (or easily React) are:

  • Component-based UI architecture. As the project functionality grows, building out the UI in a component-based approach is ideal. Makes it easier to manage and support. Blaze kind of supports "components" via its templates but it's not a true implementation.
  • Reusability. Blaze kinda supports this but not really. Missing local reactive state for example. Hard to "re-use" a Blaze template and not very straight-forward
  • Portability In the event we want to move away from Meteor in the future and decouple the front-end from the backend, we can do so with libraries like Vue. Blaze today, only works within a Meteor project.
  • Performance - Blaze does not implement a virtual DOM. Not a big issue for small-to-medium projects but as a the projects grows, scaling it out will become a problem with Blaze. Think of efficiently re-rendering your components.
  • Eco-system & Community Vue has grown tremendously over the years and its eco-system is much more mature than ever. Vue's documentation is amazing, practical and approachable. You won't have issues finding solutions online to Vue problems versus say Blaze.

Lastly, aside from the technical advantages. I just want to highlight the fact that we have an opportunity to create an open-source project with a tech stack that is keeping up with modern times and allows existing and new contributors to continually learn and grow their skills with applicable job market skills. Plus we might attract more contributors since Vue is a mainstream framework.

Yes, it will be challenging (and a bit painful) to migrate over to Vue but I believe the long-term benefits outweigh the temporary pain. You can argue, "if ain't broke - don't fix it" but I believe this is a bit short-sighted.

@lpatmo

This comment has been minimized.

Copy link
Member Author

lpatmo commented Jul 22, 2018

Thank you for outlining all of those reasons out! :)

@railsstudent

This comment has been minimized.

Copy link
Collaborator

railsstudent commented Jul 23, 2018

I also spoke with @distalx a while back and expressed my interest to pick up Vue.
SFC architecture of Vue keeps model, template and CSS in one file; therefore, developer can focus on making changes in one place instead of switching from tab to tab to make incremental changes (AngularJS and Angular).
Vue is the hybrid of AngularJS and React, anyone with either experience can learn the framework with lower learning than newcomers.

I have the pleasure of using AngularJS, Angular, React and Vue in my free time and would love to make a quick comparison among them.

AngularJS - it is on the way out of JS ecosystem, Google announced 3-year LTS and will stop maintenance in 2021 completely. I do not recommend it in new project and revamp.

Angular - Very cool framework but it is more suitable for enterprise-scale application than codebuddies that is a medium-sized project.

React - I tried it before but do not like its syntax. The syntax is very flexible but if it is not written cleanly, the render function can turn into spaghetti code and become difficult to understand. Moreover, CSS in JS syntax may not sit well with developers who are accustomed to putting CSS, HTML and JS in separate files.

Vue - Points above. Even though template, CSS and JS are packed in one file, CSS properties still obey CSS specification whereas React applies its own rule to convert CSS properties to camel case and replace hyphen with blank. Template uses HTML 5 syntax with additional vue syntaxes such as v-binding for data binding and v-on for event binding. The initial shock was there for me but it subsided eventually after building few small apps.

I hope it helps everyone to decide the next JS framework to use on front-end side. Thanks.

@lpatmo

This comment has been minimized.

Copy link
Member Author

lpatmo commented Jul 23, 2018

Thanks for your input, Connie. Let's go for it. Especially since this point @sergeant-q highlighted is true: - Incrementally adoptable. Meaning we can slowly replace all Blaze templates and run both in parallel

My only wish is that maybe @sergeant-q, @distalx, or whoever else starts playing around with Vue in a branch (after the Meteor 1.7 upgrade) for 30-60 minutes can open up a hangout, or let others know that they're in the 24/7 hangout on https://codebuddies.org/study-group/%2523codebuddies-meta/f3tfAb6Y2CEADZaFe, so that other folks in the community who want to observe or want to get their feet wet with vue.js can jump in and learn/observe/even collaborate.

I know I'm guilty of not doing this consistently for every issue I work on, but given the nature of this particular project, I think it'll help with the momentum.

@d3vild06

This comment has been minimized.

Copy link
Collaborator

d3vild06 commented Jul 23, 2018

I think we can certainly arrange that @lpatmo ! @distalx and I will work on the logistics and prep work to make the hangout valuable for others.

@d3vild06 d3vild06 changed the title Use React instead of Blaze Migration to new Front-end Framework/Library Jul 23, 2018

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