The mean stack
- 2. As a developer that recently graduated from a coding bootcamp, the big question I had was “well, what do I learn now?”, right after “well, who’s gonna hire me now?”. What I was working with for the past few months, and built 3 cool apps with, was React, Redux, Javascript, PostgreSQL, Ruby, and Ruby on Rails. I wanted to have a healthy amount of diversity within my skill set, but with all of the languages and frameworks out there I had no idea where to start. Scrolling through tons of job listings I saw a wide variety of languages/technologies such as C++, MySQL, Vue, Java, Go, Python, and Node.js just to name a few. I was dumbfounded, I really wanted to learn something new but nothing was clicking.
- 3. Until I found the MEAN stack, it’d certainly add some diversity to my skill set and it has a cool acronym. The acronym is cool and all but what does it mean? Well, it just stands for the technologies it uses, MongoDB, Express, Angular, and Node.js. It effectively counters what I’ve been working with, a NoSQL database, the popular alternative frontend framework to React, and a server-side Javascript run-time environment. I knew I wanted to learn Angular because of Vue’s smaller community and over- flexibility. The backend was a little harder to decide on, initially I wanted a C-based compiled language, far from Ruby, for that extra spice such as Java or Go.
- 4. The drawback being it’d take longer to learn. Also, I wanted to have experience with a NoSQL database as I already dealt with a SQL database, but again, didn’t know which to choose. Now the nitty-gritty of the MEAN stack, starting with good ol’ MongoDB. It’s a NoSQL(“not only SQL”) database meaning it doesn’t enforce schema or relations(flexible) and has documents in collections rather than records in tables. As a NoSQL database, it scales horizontally, meaning it automatically spreads data across servers as necessary conversely to the vertical scaling of SQL databases that requires significant further engineering to deal with the increased demand and spread over many servers.
- 5. SQL databases take the cake when it comes to consistency due to their adherence to a schema while a NoSQL database would need something like mongoose to give the database a little more structure for a Node.js backend. Also, their types vary greatly, NoSQL databases have several distinct types such as document databases, graph databases, wide-column stores, and key-value stores while SQL databases have one type with minor variations. In essence, use a NoSQL database, like mongoDB, for the simple scalability and flexibility of your stored data; and use a SQL database, like PostgreSQL, for strong consistency and relationships between your data models.
- 6. I’ll combine the E and the N because they work in conjunction with one another. Express is a robust Node.js web application framework that makes writing Node.js code simpler. It’s middleware-based, meaning it funnels requests through functions, including routing, view-rendering, and more. If you’re using Node, Express is a must due to its MVC-like structure, ease of routing, and ultra fast I/O. Node is a Javascript runtime built on Chrome’s V8 Javascript engine. It implements ECMAScript, e.g. ES6, allowing you to write modern Javascript for your server-side logic. Node is responsible for interaction with your database and listens/responds to client-side requests.
- 7. It gives you the benefit of Full-Stack Javascript making it easy to learn and create high performance apps due to Google’s open-source V8 Javascript engine. The engine compiles the Javascript code directly into machine code, giving it that performance boost for fast and effective code implementation. Node also scales applications easily both horizontally, by adding additional nodes to your existing system, and vertically, by adding extra resources to the single nodes. Another benefit of Node is that it can handle concurrent requests more efficiently than other server-side technologies such as Python or Ruby. Though, a key problem developers have with Node is the unstable changes to the API, unstable in that a new version may have a number of backwards-incompatible changes that forces developers to change their code to match the compatibility of the latest version.
- 8. Initially, I wanted to just stick with React because of the Virtual DOM advantage, but after learning some more about Angular and how it works, I was curious. Angular is a client-side Javascript framework that renders the UI with dynamic data. Similarly to React, Angular runs on a component tree model, meaning you can create a very modular UI with re-usable components. The typical structure for a component is a typescript file which holds the component logic/data and an HTML file that uses template syntax to insert Javascript directly into the template. Template syntax uses double brackets for Javascript code injection, e.g. <p>{{ post.content }}</p>. I can’t talk about Angular without talking about Typescript which is what Angular’s source code is written in.
- 9. It may seem like “oh my God I need to learn another language for this?”, but Typescript allows the use of ES2015/ES6 classes and modules. So, it feels like you’re writing modern Javascript with a twist, the twist being decorators which isn’t a M. Night Shyamalan level twist. A Typescript decorator for a component looks like this: The selector indicates the component within the HTML template, so in this case, you’d insert <app-post-create></app-post-create> into your template file and that would render this component. The template URL indicates the file that’ll contain what’ll actually be rendered to the browser. The style URLs is an array of the files that will be responsible for styling that specific component. To have an organized file structure, these 3 files are usually within a folder with the component name, post-create in this case. Angular also has services, which are Javascript classes or functions that encapsulate some logic.
- 10. To me, services feel like a built-in Redux, because a service can contain a private data structure and functions that can be injected directly into components, giving them access to those functions. In Angular, you’ll create your root module in an app.module.ts file which will contain the imports, declarations, and bootstrap. No matter where you are in your coding journey, whether you’re just starting out or you’ve been coding for years, I hope I shined a light on the MEAN stack and adequately described its highlights as a web development stack. My next projects will be built with the MEAN stack and I’m having a blast creating with these technologies. Every time I learn something new it’s like a whole other world of possibilities opens up and I’m free to endlessly explore that new world. There’s so much more to each of these technologies that can’t be fully explained within one article, so I urge you to dive into that MEAN rabbit hole and learn how you can create high performance web apps.
- 11. www.facebook.com/asterixsolutionlab www.asterixsolution.com www.plus.google.com/+Asterixsolutionlab
- 12. To Know More Visit :- http://www.asterixsolution.com/mean-stack-training.html