Jamie Domingo
Aug 31, 2018 · 3 min read

How I Learned a New Framework in 1 Week

Learning something new can be a challenge and for this week’s Lambda Next project we had the task of learning a new language, framework or tool. A new language seemed daunting but I thought to take a stab at it and see how far I would get. At first, I chose ReasonML since it was slowly gaining popularity. One thing that the ReasonML docs say is that it’s not a new language but a new “syntax” that’s geared towards Javascript developers and has support for yarn and npm. I started one tutorial on how to build a todo list but I found it a bit difficult adding more to the basic functionality. The syntax was a bit too foreign to me to grasp within a week. Since ReasonML is fairly new, I didn’t find a lot of resources online for it either. It was too much a task for a beginner like myself and I had to reconsider moving further.

I then decided on learning Vue. I was curious about other Javascript frameworks since learning React especially after loving how fast it was for me to setup the front end with it. I followed another tutorial on how to create a todo list (https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2). I hadn’t decided on what my project would be yet but eventually settled on creating a recipe app, which I aptly named RecipeApp, since I could expand on the todo list. Users could create recipes and input information about the name, ingredients, and instructions as well as having a list of recipes that they created.

Going through the tutorial, I noticed striking similarities to React. First, just like React, Vue is also components based. I was organizing my code like how I would with React, creating parent components and children components. The structure also looked similar, with sections for rendering html elements, declaring state, and also a section for methods as well as similarities in passing props to children components. I found myself quickly setting up the front end due to my familiarity with React. I changed the todo list into a recipe list. Instead of one input in the edit and create forms, there were now three for the recipe name, ingredients and instructions. I also moved the edit form to its own section to the right of the recipe list. When the create recipe button is clicked, the create form expands and now the the recipe list and edit sections are hidden so the screen isn’t so cluttered. After the base front end functionality was created, I started on the backend. I used Node, Express and MongoDB like I would if I were using React. Connecting the front end to the backend was straightforward as Axios is also supported. I used the “mounted” lifecycle function that acts similarly to the ComponentDidMount function in React to render the recipe list. As for styling, the tutorial used a CSS library called Semantic UI. It took a bit of understanding of how to use it since it wasn’t a matter of replacing HTML tags with the library’s tags like bootstraps but changing the class names in the tags. I would have normally just done the css myself but I thought it would be a good opportunity to learn. I then deployed the app to heroku after following some configuration settings using their documentation and watching a helpful Youtube tutorial.

RecipeApp using Vue.js

Creating the RecipeApp with Vue has been a positive experience. Not only was it easy for me to get started on it, the documentation was also very thorough. There were a plentiful amount of resources online that when I got stuck, I could easily find examples to guide me through my issues. I would definitely consider using Vue in the future after this positive experience.

Deployment:
https://aqueous-springs-89038.herokuapp.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade