Svelte: Desarrollo web moderno con javascript from Udemy

Svelte es un nuevo framework de JavaScript para construir interfaces de usuario. Utilizando las ultimas novedades de javascript.

Svelte cambia el paradigma de trabajo en diversas ventajas. Por ejemplo, otros frameworks como react, vue, etc, hacen la mayor parte del trabajo en el navegador, en cambio svelte lo hace en tiempo de compilación, lo que hace que el trabajo realizado con sus componentes sea mas eficiente.

Otra ventaja es que no utiliza virtual dom si no que actualiza el dom cuando cambia el estado de la aplicación, lo que genera un excelente rendimiento.

Una de las cosas que mas interesantes de svelte, es que la curva de aprendizaje es realmente baja, incluso comparada con vue, que también tiene a ser muy sencillo, pero la claridad de la sintaxis y lo sencilla que es hace que puedas aprender este framework en muy poco tiempo, temas o no tengas experiencia con otros frameworks.

El framework esta hecho con la intención de reducirlo lo mas posible, haciendo que nuestros proyectos sean livianos, un proyecto de svelte pesa al rededor de 30 mb, cuando otras alternativas rebasan los 100 mb al crear un proyecto y al final las app que creamos para enviarlas a producción son muy ligeras.

Es un framework completamente reactivo, así que podemos exprimirlo al máximo para sacarle toda potencia de este tipo de frameworks, ademas esta totalmente optimizado a la hora de compilar nuestros proyecto y enviarlos a producción.

También cuenta con su propio manejado de estados, así que no tenemos la necesidad de usar librerías externas en ese sentido y ademas es muy sencillo de utilizar.

En resumen svelte es un framework muy potente que deben de probarlo ahora mismo. Porque tiene todo el potencial para convertirse en una de las mejores herramientas en el mundo del desarrollo web. Y definitivamente se puede convertir en uno de nuestro favoritos.

What's inside

Learning objectives

El manejo de este nuevo framework llamado svelte
Uso de los componentes
Uso de variables reactivas
Databinding
Bloques if, each, await

Manejo de apis
Uso de rutas con svelte-spa-router
Firebase con svelte
Proyectos con backend en php y mysql
Sveltekit para desarrollo del lado del servidor ssr

El manejo de este nuevo framework llamado svelte
Uso de los componentes
Uso de variables reactivas
Databinding
Bloques if, each, await
Manejo de apis
Uso de rutas con svelte-spa-router
Firebase con svelte
Proyectos con backend en php y mysql
Sveltekit para desarrollo del lado del servidor ssr

Syllabus

Introducción al nuevo framework de Svelte

Bienvenidos al curso de svelte

¿Qué es svelte?

Iniciamos con la parte básica de este framework

Crearemos nuestro primer proyecto de Svelte

Crear proyecto en Windows

Veremos como esta constituido un proyecto de Svelte

Variables y constantes

Veremos como hacer two-way binding con las variables de Svelte

Como mandar llamar una función en Svelte

Uso de variables reactivas también conocidos como propiedades computadas

Como utilizar la estructura if en Svelte

Como utilizar el bloque each en Svelte

Uso del bloque await para trabajo asíncrono

Proyecto svelte-basico

Veremos una de las parts mas fundamentales el trabajo con componentes

¿Qué es un componente?

crearemos nuestro primer componente

Veremos como agregar propiedades a los componentes

Crearemos una card con bootstrap

Modularizaremos aun mas nuestros componentes

Veremos como crear otro post

Input personalizado en componente

Utiizaremos metodos desde componentes

Enviar parametros en dispatcher

Veremos el suo de los slots

Como crear slots personalizados

Veremos como generar eventos en los slots

Veremos como ejecutar cada uno de los métodos del ciclo de vida

Proyecto componentes

Veremos como crear rutas en nuestros proyectos

Usaremos una librería para definir nuestras rutas de una manera muy simple

Definiremos las rutas de nuestro proyecto

Utilizaremos link y push para navegar entre paginas

Enviaremos parametros

Proyecto rutas

Veremos un repaso de todo lo aprendido de svelte hasta ahora realizando un pequeño proyecto

Comenzaremos definiendo nuestro proyecto

Realizaremos el archivo routes.js

Veremos como funciona y el registro de la api de themoviedb.org

Conectaremos con nuestra api a través del bloque AWAIT

Crearemos un cargador CSS

Definiremos la card y grid de nuestro proyecto

Enviaremos el parametro necesario para la vista detalle

Utilizaremos el metodo onMount para mostrar un solo objeto de la api

Añadiremos los últimos detalles del proyecto

Proyecto API Películas

Veremos como crear un crud con el servicio de firebase

Como funciona firebase

Configurar firebase

Registro

Manejo de sesión

Diseño de pagina crud

Guardar en firestore

Mostrar datos

Editar

Eliminar

Storage

Guardar imagen

Barra de progreso

Mostrar imagen en tabla

Eliminar imagen

Editar imagen

Proyecto Firestore

Aprenderemos a manejar los stores de svelte

¿Qué es el store en svelte?

Desarrollaremos nuestra primer store

Veremos otro método para subscribirnos a la store

Veremos como limpiar una store

Veremos como utilizar el método update o set

Añadiremos mas objetos a la store

Trabajaremos todo desde el store

Como utilizar el metodo readable en el store

Proyecto store

Apenderemos a trabajar con php para crear un registro de usuarios e indio de sesión

Veremos como instalar la version de xampp en Mac

Veremos como instalar la version de xampp en windows

Crear tablas en phpmyadmin

Crearemos nuestro frontend con svelte

Definiremos nuestras rutas con svelte

Input Custom con materialize

Formulario de resgistro

Veremos el uso de la libreria SweetAlert

Foto de perfil

Guardar usuario lado php

Registro lado svelte

Validar email lado php

Validar email lado svelte

LocalStorage

Salir lado php

Salir lado svelte

Mantener sesión

Proyecto svelte + php parte I: login

Aprenderemos a curar un crud con un backend, en este caso con php

Mostraremos la bienvenida al usuario

Guardar en php

Formulario de guardar en svelte

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Enseña a usar Svelte, un framework nuevo y potente muy prometedor

Examina en profundidad las principales características y ventajas de Svelte, haciéndolo ideal para principiantes y estudiantes intermedios

Tiene una curva de aprendizaje baja, lo que permite a los estudiantes aprender rápidamente y comenzar a construir aplicaciones web

Incluye prácticas y ejemplos para reforzar los conceptos aprendidos

Cubre temas esenciales como manejo de estados, enrutamiento y conexión con APIs, proporcionando una base sólida para el desarrollo de aplicaciones web

Requiere que los estudiantes tengan conocimientos previos de JavaScript

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Svelte: Desarrollo web moderno con javascript with these activities:

Revise the basics of JavaScript

Show steps

Start by reviewing the fundamentals of JavaScript to ensure you have a strong foundation for learning Svelte.

Show steps

Review basic syntax and data types
Practice writing simple JavaScript functions

Tutorial: Hello World

Show steps

Follow a step-by-step tutorial to build a basic Svelte application to reinforce concepts learned in the course

Browse courses on Promises

Show steps

Create a new Svelte project
Add a component to the project
Write code to handle user input
Run the application and verify that it works

Crea un proyecto básico de Svelte

Show steps

Crea un proyecto básico para practicar la estructura básica de Svelte y familiarizarte con los componentes esenciales.

Show steps

Crea un nuevo proyecto de Svelte
Crea un componente de vista principal
Agrega una variable reactiva y muestra su valor

Three other activities

Expand to see all activities and additional details

Show all six activities

Discussion: Best Practices

Show steps

Participate in a discussion with peers to share and learn best practices for Svelte development

Browse courses on Best Practices

Show steps

Join a discussion forum or online community
Share knowledge and experiences with others
Learn from the experiences of others
Apply best practices to own Svelte projects

Project: Portfolio Website

Show steps

Build a portfolio website using Svelte to showcase skills and projects learned in the course

Browse courses on Portfolio

Show steps

Plan the structure and design of the website
Create components for different sections of the website
Add content and style to the website
Deploy the website and share it with others

Practice: Component Communication

Show steps

Complete a set of exercises to practice using different methods of communication between components

Browse courses on Component Communication

Show steps

Create two components that communicate with each other
Use props to pass data from one component to another
Use events to trigger actions in one component from another
Verify that the communication is working correctly

Career center

Learners who complete Svelte: Desarrollo web moderno con javascript will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

Full-stack developers are responsible for the design and development of both the front-end and back-end of web applications. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers PHP, a popular back-end programming language.

See salaries and explore the career path for Full-Stack Developer

Data Scientist

Data scientists are responsible for the development and application of statistical and machine learning models. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of data science.

See salaries and explore the career path for Data Scientist

Machine Learning Engineer

Machine learning engineers are responsible for the design and development of machine learning models. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of machine learning engineering.

See salaries and explore the career path for Machine Learning Engineer

Business Analyst

Business analysts are responsible for the analysis and improvement of business processes. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of business analysis.

See salaries and explore the career path for Business Analyst

Data Analyst

Data analysts are responsible for the collection, analysis, and interpretation of data. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of data analysis.

See salaries and explore the career path for Data Analyst

Web Developer

Web developers are responsible for the design and development of websites. This course in Svelte can help you to build a foundation for your career as a web developer. Svelte is a modern JavaScript framework that can help you to quickly build interactive web applications.

See salaries and explore the career path for Web Developer

UI/UX Designer

UI/UX designers are responsible for the design and user experience of websites and applications. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of design and user experience.

See salaries and explore the career path for UI/UX Designer

Project Manager

Project managers are responsible for the planning and execution of software development projects. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of project management.

See salaries and explore the career path for Project Manager

Product Manager

Product managers are responsible for the planning and development of software products. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of product management.

See salaries and explore the career path for Product Manager

Technical Writer

Technical writers are responsible for writing documentation for software and applications. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of technical writing.

See salaries and explore the career path for Technical Writer

Front-End Developer

Front-end development is the practice of transforming data into a graphical interface that a user sees and interacts with. If you want to become a front-end developer, you will need to learn how to code in HTML, CSS, and JavaScript. Svelte is a modern JavaScript framework that can ease the transition into becoming a front-end web developer. Svelte takes a unique approach to building web applications, and that is by compiling your code during build time. This course will help you learn the basics of Svelte, including how to use components, variables and data binding.

See salaries and explore the career path for Front-End Developer

Interaction Designer

Interaction designers are responsible for the design of how users interact with websites and applications. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of interaction design.

See salaries and explore the career path for Interaction Designer

Information Architect

Information architects are responsible for the organization and structure of websites and applications. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to quickly build interactive web applications. Additionally, this course also covers the basics of information architecture.

See salaries and explore the career path for Information Architect

JavaScript Developer

JavaScript developers are responsible for writing and maintaining JavaScript code. This course in Svelte is a great way to learn about Svelte, a modern JavaScript framework that can help you to build interactive web applications.

See salaries and explore the career path for JavaScript Developer

Software Engineer

Software engineers are responsible for designing, developing, and maintaining software systems. This course in Svelte may be useful to you if you are interested in a career as a software engineer. Svelte can help you to build web applications quickly and efficiently.

See salaries and explore the career path for Software Engineer