
This section is the introduction.
This lecture will cover theory explanations on the definitions of scalable applications, problems with none-scalable applications, and what are the solutions.
This lecture will cover what is the meaning of a BRD in a company and will view the low-fidelity designs of Film-Centre application
In this lecture with the use of schema driven design, we will translate all the UI layouts, routes, visual attributes into json
This lecture covers what tools we need to create and run the project.
This lecture covers how to create our front-end repo using Vuetify.
This lecture covers what is JSON Server, learn how to use it and how front-end developers can quickly use it to accelerate their development process when no API is provided.
This lecture covers how to start mocking the low-fidelity designs in a static way, defining routes, and making application ready for next phases.
This lecture covers how to implement HomeView components such as jumbotron, carousel, and more...
This lecture covers how to implement FilmsView components such as FilterComponent, ListView, and more...
This lecture covers how to implement FilmView components such as AvatarComponet, Description, and more...
This lecture covers how to use object oriented and axios as well as singleton design pattern to build a robust api client
defining different APIs and structuring their folders to have a scalable API client
This lecture covers how to boost our API client library by using Factory design pattern to make it perfect!
This lecture covers how to combine dynamic component loading technique, schema injection, and lazy loading to implement Jumbotron, slideshow, and more components
This lecture covers how to combine dynamic component loading technique, schema injection, and lazy loading to implement our scalable dynamic Header and Footer
This lecture covers how to implement FilmsView components such as filter using schema injection and multi-pattern multi-service design patterns
We will use our schema to create FilmView components such as avatar, description, and more...
In the last lecture of the series we will see how easy it is to reuse our components used in FilmsView and replicate UsersView and will be the conclusion of the course.
Take your front end development to the next level with Scalable Front End – the only course designed to give you the skills necessary to build dynamic, scalable apps. Learn how to use schema-driven design, control UI elements using back end JSON schema, and master design patterns like multi-service/multi-template design patterns. And that's just the beginning! With Scalable Front End, you'll be equipped with the knowledge and tools to optimize your software development cycle in big companies. Start your journey today!
Learn the fundamentals, dive into coding in the Vue JS framework and get hands-on experience with a challenging schema-driven design project to understand how to create a large Vue JS application. With this course, you'll have all the skills you need to build powerful and dynamic applications and take your career to the next level.
Develop your front-end skills effortlessly and quickly with Scalable Front End! Master all the powerful strategies and techniques to build advanced web applications without having to worry about any particular framework. With this course, you can apply the same methods for React JS, Angular JS, or whatever your next project may be. Join us and start making the most out of your front-end development!
This course is created to help front-end developers and engineer take their skills in a more advanced level and build full dynamic scalable applications. The course starts with some theoretical explanation of the software production cycle and then dives into coding in the Vue JS framework by implementing a challenging schema-driven design project called "Film-Centre" to show the different and powerful strategies to build scalable front-end applications. We will analyze complex layouts and functionalities and translate them into JSON schema. Later implement the UI statically, next we will use our quick API endpoint created by the JSON server to return our JSON schema and build our application with different advanced methods.
Who is this course for?
- Any front end developer (vue, react, angular) willing to know how to design complex, scalable front end applications.
- Any back end developer who wants to be one step ahead of others by knowing the secret of coordination of UI elements from the back end.
- Anyone interested to know what are the exact expectations of a company from a senior front-end developer
- Anyone stuck with heavy and complex projects willing to know the secret of building flexible, scalable, and maintainable applications.
The Github repo links is included as a resource from section 4 and so on as well as in the last lecture.
What technology and framework are used?
- Vue JS
- Vuetify
- Javascript
- Sass
what design pattern do we use?
- Singleton
- Factory
- Schema-Driven Design
- Single Component Design
What is schema-driven design?
It is a new modern approach in software development to give control and flexibility to the layouts.
Is schema-driven design relevant to XML schema?
They are not wholly relevant but have some similarities.