Front-end development list for moneypark projects

Front-end workshop - knowledge areas and best practices

by Julia Dizhak

moneypark

Serious citations from real web-online life.


If your business is online - your value depends on front-end engineering.


Every gorgeous design is brought to life by front-end engineers.

Agenda

  1. Architecture
  2. Build tools: NodeJS, npm (in a plan migrate to yarn), bower, gulp
  3. Structure of templates: semantic markup and accessible markup, internationalization, strings rendering
  4. JS
  5. AngularJS1.x
  6. React

Single Page Application


SPA is a webpage that always keeps you on the same page.

On most websites whenever you click a link, the page reloads.

In a single page application, clicking a link keeps you on the same page, but replaces a part of it with the new content.

Examples are things like Mailing systems where you stay on the same page but it just grabs data from pre-loaded stuff.

Build SPA within ngRoute module, ngRoute, uiRoute, $routeProvider

Node

NodeJS a JS runtime environment.

NPM

Node Package Manager is a package manager that allows you to install JS libraries that run on node.js.

Package manager is command line interface.

					npm init . -> create package.json
					npm install gulp (-g)

Bower

Bower is a package manager for JS and CSS libraries that run in the browser

					bower init . -> create bower.json
					bower install jquery --save
					bower update

Gulp

Gulp is a JS task runner, designed to automate (run) common tasks.

A demonstration how to use and install Gulp, the streaming build system.

Anatomy of gulpfile

				 task(string, function)
				 .src(string || array)
				 .watch(string, array) 
				 .dest(string)
				 .parallel() and .series()

Example of gulp.task

				gulp.task('css-compile', function () {
				return gulp.src('mmp/static/scss/**/*.scss')
				  .pipe(debug({title: ‘unicorn:'}))
				  .pipe(autoprefixer({ browsers: ['last 5 versions', ...] }))
				  .pipe(cleanCss({ compatibility: 'i18'}))
				  .pipe(rename(function (path) { path.basename += ".min”; }))
				  .pipe(gulp.dest(config.paths.css));
				});

Gulp npm packages

				 JS compile --> json + 'gulp-concat', 'gulp-uglify' 
				 css compile --> 'gulp-sass’, 'gulp-autoprefixer'
				 image compile --> 'gulp-imagemin’, 'gulp-responsive'
				 svg compile --> 'gulp-svgmin' 
				 sprites --> 'gulp.spritesmith'
				 fonts compile: use api from external resource

Using Yarn and Webpack: in a plan

If you go to bower.io you will see the message “while bower is maintained, we recommend using Yarn and Webpack for front-end projects"

Yarn

Yarn is a fast, reliable, and secure alternative npm client.

Benefits:

  • ultra fast
  • mega secure (can work offline)
  • super reliable (manage our dependencies more reliably)

Structure of HTML templates

build by Django


Semantic markup

HTML5 semantic elements: main, section, article, header, footer, nav, aside, figure, fig caption, ...

accessible markup

Accessible markup (in a plan)

Accessibility refers to the design of products, devices, services for people with disabilities

The concept of accessible design ensures both

Internationalization (localization)

Switzerland - support 4 languages

Strings rendering - trans, blocktrans, context (django specific)

Langusta moneypark translation tool

The history of JS in Moneypark

AngularJS 1.x

AngularJS works with the long-established technologies of the web (HTML, CSS, and JavaScript) to make the development of web apps easier and faster than ever before

We are using angular conventions, style guide from from John Papa

Linters

  • JS quality: use ESLint with configuration https://github.com/standard/eslint-config-standard to confirm the quality of code
  • Scss linter - csslint

Meetups in Zurich