I want to tell you my story of starting to enjoy using Vue.js and doing front-end development. This should not be construed as an article on why Vue.js might be better than React, Angular, or any other web framework you're considering. Vuejs is amazing, but we live in an age that is just as amazing as frontend developers.
If you had spoken to me a few years ago, I would have positioned myself as a backend developer, mastering server and database administration. Object oriented languages, java and c#, I wanted to find a single development language that I needed to use when delivering programs, I gradually learned more about .NET and SQL server stack technology. At the time I had the notion that front-end developers were just right-brained arty people, not "real" programming.
However, in my last job search, options were few. Especially job interviews, I saw how I failed. That failure was very frustrating, but I learned a lot from it. I got a position that leveraged my experience with SharePoint. My experience with SharePoint is nothing special: designing pages with GUIs, workflows, etc. is not my dream job, but a job I have to do to live.
When I first started, I was exposed to any similar projects like I've done in the past. I rely on GUI to design user interface. Fortunately, experience with databases has allowed me to design lists in a canonical way, but there seems to be a lack of user interface features. In SharePoint Designer, some effects are difficult to achieve even if the underlying ASP is modified.
I had a discussion with a great developer that really touched me and I started my journey into front-end frameworks. She said, "You know...SharePoint supports REST services." Ah, yes! I can use Ajax on SharePoint and build my HTML based on the response. This will be super fun!
One specific application of our first iteration, xmlhttprequests, builds HTML via JavaScript functions. This method concatenates so much that our functions and strings are getting harder and harder to maintain. So, I wonder if there is a better general solution to this problem.
Of course there is! Welcome to the "Why you should use framework X" video and blog. After doing tutorials and watching debates on the subject, I refuse to use frames. After all, using a framework means everyone has to get smart. However, while researching frameworks, I came across Handlebars, the template engine used by Ember.
So, we did what any sensible team would do. We rewrote the project to use this template engine. Aside from explicitly calling the compile function, it was a nice experience. The initial rendering was completely fine. However, we need to add the ability to collapse/expand certain items in the item list. My first approach to this problem was to set a "visible" property on my object and recompile the template when the property's value changes. This means that hundreds of elements have to be re-rendered based on changes. We utilize jQuery to apply handlers which can show/hide elements based on certain selectors.
I find this confusing. The final product is functional, but can I complete the code and maintain it in a month? Maybe a year? If it doesn't take much effort. Allow me to take this opportunity to say that maintainable code is heavily written using jQuery and Handlebars. At this point, I don't have the ability to get it right.
So, I just wanted to go back and look at the available frameworks. There are so many good frameworks to choose from, but we have a unique environment. We can't use node. Without NPM, no tools are heavily used in every framework. We came to the conclusion that running Babel in the browser also degrades performance. Given these conditions, React, Ember and Angular2+ are not viable options.
We didn't take AngularJS (1) seriously. I've implemented another project with it, but it's not officially supported anymore, and vue.js just released V2 with a clear path to use in browsers. It will continue to gain popularity and there are tools available. So, if we don't miss the opportunity to use it, including one of the tools it provides, we've decided to support it as well.
Why Vue.js, for fun?
Many of the reasons I gave can be attributed to Vue alternatives.
template
What initially got me interested in vue.js was templates. Using some curly braces, I can insert values into the submit content based on variables accessed by JavaScript. Vue.js DOM and component templates are easier to use by providing a path through the use of templates. Also, not much focus on using vue.js in IE9+, and IE doesn't support templates.
Responsiveness
The fact that I can make changes to our model and it will automatically update the content on the page is what makes angular.js so useful to me. Similar to the original "ng-model" model, vue.js provides a "V" directive that can easily display the input content. With watchers, this response expands to perform actions not necessarily related to what's happening on the page.
components
While you can take advantage of Vue's React and Templates without using components, the implementation of the componentized architecture is really interesting. It was fun to learn how to encapsulate behavior into components and it allowed me to split up my code efficiently. Similar to living in the C# world where classes need to do too much, I realized when a component can do too much. This practice stimulates intellect to a certain extent, stimulates the feeling of programming.
Why do you think the front end is so interesting?
As a kid, my dream was to program. What exactly? Desktop applications and games. When I started doing real programming, I really wanted to do the kind of work that would benefit others. I don't know about you, but until recently I had a preconceived notion of a "real programmer" hierarchy that looked like this.
-
real programmer
-
OS/Kernel Programmer
-
desktop application
-
game programmer
-
Backend web programmer
-
Front-end web programmer
-
SharePoint/Sales/Other Platform Programmers
-
Microsoft Office (Access/Excel) Programmer
-
not a real programmer
This kind of thinking really makes me feel like a backend person, let alone frontend. For a long, long time, even in many places, both front-end and back-end were done by the same person. This resulted in less focus on the front end, resulting in a lot of low quality sites. The company then started hiring people on the front end, getting their fees in dollars. The job has a bad reputation, and I don't want to have anything to do with that reputation.
However, as mentioned earlier, I found myself in an awkward position of relying on the front end for my needs. To my surprise, programming the browser is not only fun but functional.
browser capabilities
I'm always amazed at what browsers can handle. Even poor old Internet Explorer can handle reading, parsing and creating Excel files without calling the server. Canvas and SVG give us two super useful ways to create beautiful and dynamic images/animations. Using Ajax, we can create dynamic content that is periodically and seamlessly updated to the user.
sharing is happiness
If you don't hide your source code when developing on the client side. It's there for the world to see. So, not to be surprised, JavaScript projects are largely represented on GitHub. Also, many projects are MIT, Apache, or other licensed very friendly. **Score!** Contributions from awesome people help me contribute to my company in a faster and more meaningful way.
instant gratification
Similar to desktop application development, we often see the impact of code in a visual way. We can use CSS and a little flair for a visually appealing site to improve our impression as developers to our bosses and users. Coupled with a visual framework for Twitter's Bootstrap or Bulma, we can really cut the time and add some traction.
Write Once Run Everywhere
The old java web development saying runs more true than java itself. Making the code compatible with multiple browsers and layouts for different screen sizes also presents challenges. The challenges themselves are interesting because they teach us about the various platforms.
JavaScript
JavaScript continues to evolve at a breakneck pace, but it's a very interesting language. Learning the language has been super fun to learn from the difference between "= =" and "= = =" to understand how functions handle the prototypal inheritance of classes. Being able to add a new feature Babel to my website (project) is even more awesome.
in conclusion
As a front-end web developer, I get to work with great people in the workplace and get feedback on my ideas in the larger developer community. Why do you like front-end development? What do you think of Vue.js?
Thanks for reading!
Denny Headrick is a web developer who likes too many ways of working. He can be seen during Vue.js discussions on various top platforms, and he likes to blog once in a while. You can follow him on Twitter @dennythecoder.
Huizhi.com Xiaozhi Translation (Xiaozhi's website, welcome everyone to complain! www.hubwiz.com)
I also share a vue.js family bucket course:
- Getting started and improving vue.jshttp://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99?affid= 20180319oschina
- Getting started and improving vuex 2http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a?affid= 20180319oschina
- Getting started and improving vue-routerhttp://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50?affid= 20180319oschina
- vue.js engineering practicehttp://xc.hubwiz.com/course/598bad66c7fd1d49453979c9?affid= 20180319oschina