I've decided to introduce a front framework to an existing Rails application, and I've compared three famous ones along checkpoints, so I'll leave that story. This time it is a story that we compared in this way, so if you decide to choose a framework, please read it for reference only, and I think that you should change the comparison method according to the situation and project at that time. .. So this is not the correct answer. I think that the survey results may be incorrect, so it is better to conduct the survey by looking at the official one yourself.
The following three frameworks were compared and examined this time.
By the way, Angular did not have such a large-scale app to introduce this time, so I rounded up Angular's research to some extent and narrowed it down to Vue and React.
This time, I decided to discuss the checkpoints within the team, thinking that "well, if I know this, I might be able to compare."
--Outline of framework (features) --Main programming languages
Duration: 2 weeks Number of people surveyed: 3-4 engineers
The above checkpoints were shared among the team members and confirmed. Information sharing at that time used Google Docs, and Hangouts were performed as needed.
| Checkpoint | Vue | React | Angular |
|---|---|---|---|
| Outline of framework (features) | Developed and maintained by the community with the OSS framework. Only GUI components are provided. Install other libraries if needed | Developed and maintained by Facebook. Only GUI components are provided. Install other libraries if needed | Developed and maintained by Google. MVC framework for front end |
| Major programming languages | EMACS6 | EMACS6 | Typescript |
| Latest version (at the time of survey) | 2.6 | 16.13 | 10 |
| Learning difficulty | Easy: No problem if you understand the GUI components and life cycle. CSS code may be written in the component | Easy: No problem if you understand the GUI components and life cycle. | Difficulty: You need to understand the framework components other than how to create a GUI |
| Package size (approx.) | 80KB | 100KB | 500KB |
| Existing side party | Vue Material Kit, Vuetify, Vue Material, Quasar, Bootstrap-Vue | Raect Material Kit, Material UI, React Bootstrap, Ant Design, Semantic UI React | mdbootstrap, material, ng-bootstrap |
| Difficulty of implementing existing functions | You need to create a new API. | Like Vue | - |
| Problems when operating on Heroku, etc. | deploy and verify | deploy and verify | - |
| Ease of code management | Code management is easy because it is divided by components | Like Vue | - |
| Development method | Object-orientation | Component oriented | Component oriented |
| document | In Japanese | Japanese version is a literal translation of English | In Japanese |
| Migration to other frameworks | Since it is a unique format, it is difficult to go back as development progresses | Like Vue | It is difficult to replace because it is full stack |
| Ease of building a local environment | Setting at the time of introduction is a little difficult, but it is easy if it is completed | Like Vue | - |
As a result of actually developing the existing function, verifying it, reading the document and comparing it, this time it became Vue & Vuetify. One of the reasons is that many team members had experience with Vue.
Recommended Posts