[PLATAFORMA] Front-end Developers Vol. I "Trend today. Deprecated tomorrow"
ordenados
hilos
+ valorados
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.


No todos los héroes llevan capa. Abro esta plataforma para todos aquellos inconformistas que eligieron el lado luminoso de la fuerza, el lado Front-end.

El Front-end de una web o app es aquello con lo que los usuarios interaccionan directamente, lo que el usuario ve y toca, lo que el navegador interpreta: html, css y javascript. El desarrollo front-end está en constante cambio, la tecnología evoluciona muy rápido y cada vez se tienen soluciones más completas (y complejas), implicando cada proyecto decisiones importantes en la arquitectura del código. En ocasiones nos puede tentar el ritmo calmado del lado oscuro, el Back-end, pero no hay que dejarse sucumbir 😂

Fuera de coñas, en esta plataforma se intentarán tratar todos aquellos temas que involucren html, css y javascript en todas sus formas (de vanilla a react, pasando por vue y angular). Javascript surgió como una tecnología pensada exclusivamente para front-end, pero eso cambió con node, pudiendo ejecutar código Javascript en el lado del servidor, así que también podremos tratar temas de back con javascript (node, express, mongo..).

Recursos

Frameworks
- React + Redux https://reactjs.org/
- Angular https://angular.io/
- Vue + Vuex https://vuejs.org/

Tipado
- TypeScript https://www.typescriptlang.org/
- Flow https://flow.org/

Bundlers / Tasks
- Webpack https://webpack.js.org/
- Grunt https://gruntjs.com/
- Gulp https://gulpjs.com/

Preprocesado css
- Sass https://sass-lang.com/
- Less http://lesscss.org/
- cssnext http://cssnext.io/

Soluciones móviles
- React native https://facebook.github.io/react-native/
- Weex https://weex.apache.org/guide/
- Nativescript https://www.nativescript.org/
- Ionic https://ionicframework.com/

En construcción
Ahorra datos y recibe notificaciones al instante
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Dejo por aquí una comparativa de los distintos frameworks css:  Bootstrap vs Bulma vs Foundation vs Milligram vs Pure vs Semantic vs UIKit

https://codeburst.io/evaluating-css-frameworks-bulma-vs-foundation-vs-milligram-vs-pure-vs-semantic-vs-uikit-503883bd25a3

Yo le estuve echando un ojo a Bulma hace unos meses (basado en flexbox) y me gustó bastante, seguramente lo use en mis próximos proyectos :mola:
1
nomah ∙ UMA
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Univ.: UMA
Pillo sitio

Programador Angular por aquí

Como muestra https://www.estadisticacoches.com

(esa esta aun en AngularJs)
0
thaks
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
#2 shur, de dónde coges los datos de matriculaciones?
0
nomah ∙ UMA
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Univ.: UMA
thaks
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
#4 gracias!
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Dejo unas lecturas que pueden resultar interesantes:
- Service workers: the little heroes behind Progressive Web Apps https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-431cc22d0f16

- ES6 — Set vs Array — What and when? https://medium.com/front-end-hacking/es6-set-vs-array-what-and-when-efc055655e1a

- Designing very large (JavaScript) applications https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3

- An iOS Developer on React Native https://medium.com/ios-os-x-development/an-ios-developer-on-react-native-1f24786c29f0

- A Basic React + Redux introductory tutorial https://hackernoon.com/a-basic-react-redux-introductory-tutorial-adcc681eeb5e
1
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Os dejo unas lecturas que me guardé para este finde:
- JavaScript Top 10 Open Source of the Month (v.Apr 2018) https://medium.mybridge.co/javascript-top-10-open-source-of-the-month-v-apr-2018-22a06b763fd0
- Why It’s Time to Say Goodbye to Angular Template-Driven Forms https://netbasal.com/why-its-time-to-say-goodbye-to-angular-template-driven-forms-350c11d004b
- Free Frontend Masters Courses for a Week https://blog.kentcdodds.com/free-frontend-masters-courses-%EF%B8%8F-for-a-week-f5eff638df5c
0
thaks
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
#7 Gracias por todo el buen trabajo que haces en el foro Yvar
0
jayarem ∙ UNEX
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Univ.: UNEX
Pillo sitio para pinta apis.

Interesantes lecturas, gracias!
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
#8 no hay de qué! Yo lo hago con todo el gusto del mundo :-)
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
La semana pasada estuve adentrándome con unos compañeros en el mundo de React. Si bien le había echado un vistazo varias veces al cabo de los años que lleva en marcha, tanto a mis compañeros como a mi no nos convencían para nada las estructuras propuestas para los proyectos, así que decidimos crear una arquitectura/estructura propia.

Vamos por buen camino, ya que está quedando bastante limpia y nos está convenciendo. En cuanto la tengamos lista subiremos el boilerplate a algún repo y publicaremos un hilo argumentando nuestras elecciones.
0
implosiv3 ∙ UNILEON
Informático
Jun 2018 | 0 Mens.
Univ.: UNILEON
Un familiar que trabaja en Alemania me ha aconsejado que me ponga a saco con Vue.js por la organización en la propia programación,que viene pegando fuerte. ¿Qué opináis
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
#12 Vue y React pueden llegar a ser muy parecidos, y lo bueno que tienen es que te harán comprender mucho mejor Javascript y sus últimas especificaciones. Dicen que Vue es más simple (puedes utilizar un estilo de templating parecido al de AngularJS), pero lo que más cuota de mercado ocupa ahora mismo es React. Lo malo de React es juntar todas las piezas para montar un proyecto, pues no deja de ser una librería de la vista, y tendrás que usar otras piezas para router, manejo de estados, etc. En Vue también, pero digamos que todas estas piezas son de o están apoyadas por el equipo core de Vue.
0
boi ∙ UCM
Ingeniero de Software
Abr 2018 | 0 Mens.
Univ.: UCM
Cojo sitio para leer con calma.
0
netesla
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Pillo sitio y de paso aprovecho, por si hay algún interesado.

Estoy buscando a alguien que sepa de FrontEnd para un proyecto. Por supuesto no se paga ni yo gano nada, pero me parece un proyecto interesante, y quién sabe si en el futuro se podría monetizar algo. Yo tengo casi toda la parte de lo que sería BackEnd desarrollada en Python. Si a alguien le interesa, MP. Puedo adelantar que es un proyecto relacionado con FC.
0
implosiv3 ∙ UNILEON
Informático
Jun 2018 | 0 Mens.
Univ.: UNILEON
Cita:
Originalmente escrito por Yvar
#12 Vue y React pueden llegar a ser muy parecidos, y lo bueno que tienen es que te harán comprender mucho mejor Javascript y sus últimas especificaciones. Dicen que Vue es más simple (puedes utilizar un estilo de templating parecido al de AngularJS), pero lo que más cuota de mercado ocupa ahora mismo es React. Lo malo de React es juntar todas las piezas para montar un proyecto, pues no deja de ser una librería de la vista, y tendrás que usar otras piezas para router, manejo de estados, etc. En Vue también, pero digamos que todas estas piezas son de o están apoyadas por el equipo core de Vue.

Gracias por el tremendo aporte.
1
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Llevo unas semanas trabajando con React + Redux y hay cosas que no me convencen... Probablemente por una cierta ignorancia por mi parte. He hecho un componente para gestionar los modales de la aplicación a través de redux, con su container conectado a la store; quería hacer una capa de servicio (Javascript sin React) para hacer el dispatch de los actions desde ahí y no tener que conectar a la store cualquier componente desde el que quiera lanzar un modal, pero no he visto ni una manera limpia de hacerlo..
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Antes estaba trabajando en otro proyecto, pero seguía dándole vueltas a cómo hacer lo del servicio de modales de una manera limpia sin tener que conectar un componente a la store cuando quiera lanzar un modal. He encontrado una solución que sin ser óptima, queda medianamente limpia.

Consiste en un storeHandler, al que se le pasa la store cuando se crea y expone un método para hacer dispatch de acciones:
Código:
let currentStore;
const setStore = (store) => {
currentStore = store;
}

const dispatch = (action) => {
currentStore.dispatch(action);
}
export {
setStore,
dispatch
};


En el punto de entrada de la aplicación, se le pasaría la store:
Código:
const store = configureStore({}, prepareReducers(combinedReducers));
setStore(store);


y ahora desde cualquier sitio se puede hacer un dispatch sin que tenga que ser un componente de react, o si es un componente, sin que tenga que estar conectado a la store. Gracias a ello, se pueden crear servicios como por ejemplo uno para mostrar modals:
Código:
import { operations} from './duck';
import { dispatch } from './storeHandler';

class myService {
static open(modal) {
dispatch(operations.open(modal));
}

static closeModal(modal) {
dispatch(operations.close(modal));
}
}

export default myService;


Y ahora, para abrir un modal, únicamente importaría el servicio y llamaría al método:

Código:
import myService from './myService'
myService.open(modal)


Si alguien se pregunta cómo funciona el tema de los modales, hay un componente Modals onectado a la store y puesto en el body de la app, que coloca {modals} dentro. Los modales son componentes que se almacenan en un array modals en la store. Y Modals controla cada instancia de Modal abierta.

PD: Los nombres y las rutas se han cambiado para el ejemplo..
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Buenas noche,

Ahora llevo unas semanas trabajando en otro proyecto con Angular 4. Tengo una relación de amor/odio con TypeScript, prefiero React a Angular por el hecho de que está más enfocado hacia Javascript, mientras que Angular es un framework con todas las particularidades que ello conlleva y que toca estudiar ya que al principio puede parecer magia negra. Si bien es verdad que no me ha costado nada adaptarme a él tras haber tocado previamente AngularJS, React y Vue.

Y en esas estamos :zplatano1:
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Comparto una web con un concepto muy interesante que estoy mirando últimamente: Micro Frontends https://micro-frontends.org/

Esta imagen resume un poco la idea:


Crear una colección de componentes que funcionen por sí mismos, agnósticos, y que se integren en una SPA muy ligera para conformar la aplicación. Además, haciendo estos componentes con Web Components, te permite utilizarlos con cualquier framework, ya sea Angular, Vue, React.. Llevando el concepto de componente reusable a su máxima expresión. Y además, hay herramientas como Stencil que te permiten generar Web Components con una sintaxis muy similar a Angular 2+ o React, haciendo uso de TSX. Si te llama la atención la idea, puedes echar un ojo a estas transparencias: https://speakerdeck.com/rstml/from-monolith-web-app-to-micro-frontends
0
Hache1989 ∙ UIB
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Univ.: UIB
Muy interesante, pilo sitio.

Estoy en un proyecto de la uni en el cual usaremos Laravel como back-end.

Aún nos queda decidir el front-end, a ver cual elegimos. ¿Alguna sugerencia? Sólo he usado bootstrap y materializecss.
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
#21 montaréis un API REST php que consumiréis desde frontend no? Un amigo utiliza php para esto y usa slim https://www.slimframework.com/ . Otros te dirán que si quieres montar un backend de verdad uses Java xD Otros que Node para usar el mismo lenguaje que en front.. Usa lo que mejor domines, y más para un proyecto de la uni.

¿Tienes experiencia con javascript? ¿Quieres renderizado en cliente o en servidor?

- Angular 2+ hace uso de Typescript y ES6, por lo que de primeras puede resultar un poco más complicado.
- React es una libreria de la vista, no es un framework al uso, así que te toca montarte a ti la estructura de cómo gestionas las cosas, escoger librerías para hacer cada cosa y demás, quizás también sea un poco complicado de primeras (incluso más que Angular)
- Creo que el que más sencillo te puede resultar de primeras es Vue, que además está muy bien documentado https://vuejs.org/v2/guide/
0
Hache1989 ∙ UIB
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Univ.: UIB
Cita:
Originalmente escrito por Yvar
#21 montaréis un API REST php que consumiréis desde frontend no? Un amigo utiliza php para esto y usa slim https://www.slimframework.com/ . Otros te dirán que si quieres montar un backend de verdad uses Java xD Otros que Node para usar el mismo lenguaje que en front.. Usa lo que mejor domines, y más para un proyecto de la uni.

¿Tienes experiencia con javascript? ¿Quieres renderizado en cliente o en servidor?

- Angular 2+ hace uso de Typescript y ES6, por lo que de primeras puede resultar un poco más complicado.
- React es una libreria de la vista, no es un framework al uso, así que te toca montarte a ti la estructura de cómo gestionas las cosas, escoger librerías para hacer cada cosa y demás, quizás también sea un poco complicado de primeras (incluso más que Angular)
- Creo que el que más sencillo te puede resultar de primeras es Vue, que además está muy bien documentado https://vuejs.org/v2/guide/


Gracias por tu comentario! Me he sentido un poco abrumado con tanta información.

He estado mirando un poco vue y tiene buena pinta, pero me preocupa un poco al usarlo porque en el backend ya uso un modelo “MVC” que es lo que usa Laravel y lo normal es al final devolver un template (un fichero html o lo que sea junto con un array que contiene los datos extraídos de la base de datos).

Si lo hago con vue creo (y digo creo) que cambia un poco la cosa. Porque parte de la lógica estaría en la vista. A no se que solo la utilice para hacer peticiones asíncronas por ejemplo para eliminar un elemento (y luego con vue llamar a una pagina php para que haga el delete o lo que sea)

Un poco perdido como ves!! Jaja algún pdf recomendado para estas tecnologías que pones?? Personalmente creo que sería muy útil un libre o recurso que hayas utilizado para aprenderlo. Algo que en poco tiempo puedas poder trabajar un poco con ello.

Perdona las molestias y muchas gracias! Un abrazo, shur
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Cita:
Originalmente escrito por Hache1989
Gracias por tu comentario! Me he sentido un poco abrumado con tanta información.

He estado mirando un poco vue y tiene buena pinta, pero me preocupa un poco al usarlo porque en el backend ya uso un modelo “MVC” que es lo que usa Laravel y lo normal es al final devolver un template (un fichero html o lo que sea junto con un array que contiene los datos extraídos de la base de datos).

Si lo hago con vue creo (y digo creo) que cambia un poco la cosa. Porque parte de la lógica estaría en la vista. A no se que solo la utilice para hacer peticiones asíncronas por ejemplo para eliminar un elemento (y luego con vue llamar a una pagina php para que haga el delete o lo que sea)

Un poco perdido como ves!! Jaja algún pdf recomendado para estas tecnologías que pones?? Personalmente creo que sería muy útil un libre o recurso que hayas utilizado para aprenderlo. Algo que en poco tiempo puedas poder trabajar un poco con ello.

Perdona las molestias y muchas gracias! Un abrazo, shur


si, las aplicaciones en php suelen ser al final monolitos, todo en back que sirve el html al navegador. Tiene sus ventajas y sus inconvenientes, en las aplicaciones de gran escala se suele hacer una clara separación entre el backend y el frontend. El backend simplemente expone los datos a través de un API rest, y pueden consumirlo tantos frontends como se quiera. Así si quieres hacer un nuevo cliente, tienes ya la parte del backend hecha.

Con vue harías una SPA (Single Page Application), que consumiría un API que harías en php o en el lenguaje que quisieras. Puedes utilizarlo para hacer pequeñas aplicaciones que interaccionen con el usuario en el navegador, complementando a jQuery, pero no es lo más recomendable.

Laravel había integrado Vue oficialmente, échale un ojo a este artículo: https://blog.pusher.com/why-vuejs-laravel/

No te puedo recomendar ningún pdf o libro ya que yo todo lo que he aprendido lo he hecho a través de la documentación de los proyectos, pero seguro que hay alguno por ahí, miraré luego a ver si encuentro algo y te lo paso.

No hay de qué, para eso estamos! Un abrazo
0
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Buenos días, dejo por aquí una herramienta que me ha maravillado para hacer diagramas de infraestructuras interactivos y con monitorización incluso:


https://arcentry.com/
0
Hache1989 ∙ UIB
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Univ.: UIB
Cita:
Originalmente escrito por Yvar
si, las aplicaciones en php suelen ser al final monolitos, todo en back que sirve el html al navegador. Tiene sus ventajas y sus inconvenientes, en las aplicaciones de gran escala se suele hacer una clara separación entre el backend y el frontend. El backend simplemente expone los datos a través de un API rest, y pueden consumirlo tantos frontends como se quiera. Así si quieres hacer un nuevo cliente, tienes ya la parte del backend hecha.

Con vue harías una SPA (Single Page Application), que consumiría un API que harías en php o en el lenguaje que quisieras. Puedes utilizarlo para hacer pequeñas aplicaciones que interaccionen con el usuario en el navegador, complementando a jQuery, pero no es lo más recomendable.

Laravel había integrado Vue oficialmente, échale un ojo a este artículo: https://blog.pusher.com/why-vuejs-laravel/

No te puedo recomendar ningún pdf o libro ya que yo todo lo que he aprendido lo he hecho a través de la documentación de los proyectos, pero seguro que hay alguno por ahí, miraré luego a ver si encuentro algo y te lo paso.

No hay de qué, para eso estamos! Un abrazo


Gracias!! Creo que o haremos así: Laravel + Vue. Ya os iré contando.

Un abrazo!!
1
Yvar
ForoIngenieros: miembro
Abr 2018 | 0 Mens.
Comparto unos consejos sobre cómo hacer que un select se vea igual en todos los navegadores.



https://www.filamentgroup.com/lab/select-css.html
0
JonyIve ∙ US
Industrial
Abr 2018 | 0 Mens.
Univ.: US
Hola! Aprovecho que acabo de ver esta plataforma para lanzar una pregunta. Para el TFM me interesaría montar una web con un front end decente que se conecte con las rest apis de mis servicios y poder mostrar todo de forma guay y llamativa... De web unicamente se algo de html y css, pero estaba pensando en aprender algún framework a medida que voy montando y no se cuál es la mejor opción. En la empresa que estoy de prácticas se que hacen todo en react pero no me decido. Por si influye también manejo algo de javascript.

Hay algunos usos particulares de cada uno o ventajas e inconvenientes? @Yvar
1
comentarios cerrados
Compartir en
Twitter
Whatsapp
Telegram
Facebook